bujiongdan的博客

原创 Promise

由于昨天发了一篇关于setTimeout 的文章，里面提到了 Promise ，那篇文章里没有解释Promise的用法和含义，因为昨天的我还没太懂Promise，所以没有在那篇文章继续解释Promise，然后今天的我总算是对Promise有所理解了，然后我来谈谈我学到的Promise的知识，因为是个人的理解，所以会不全面，请多包涵。一、何为Promise在MDN web docs 里面是这么...

原创 JS事件冒泡和事件委托

js事件冒泡js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行html:<ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="8...

原创 看了好多关于闭包的文档，好多讲的狗屁不通，这次看到的这篇文字讲的很清晰

什么是闭包？闭包的优缺点？闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。1、变量作用域要理解闭包，首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种：全局变量和局部变量。javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。注意点：在函数...

原创 Echart.js渐变

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient.{ type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( ...

原创 使用axios调用后台接口

项目基本情况前端项目是用vue.js做的，前端起的服务URL：http://localhost:8080/后端项目是用Node.js做的，后端起的服务URL：http://localhost:3000/现在前端要调用后端服务其中一个接口，URL：http://localhost:3000/goods，这个接口需要3个参数（page，pageSize，sort） 有如下两种方式来...

原创 JS实现批量删除

&lt;input type="button" onclick="delAll()" value="批量删除" /&gt; &lt;input type="button" onclick="che()" value="全选/反选" /&gt;        &lt;table border="1" cellspacing=&q

原创 JS变量命名

原生JS中变量不能用“-”，会报错。如果想区分不同单词，就第二个单词首字母写成大写就好了，中间不要用“-”

原创 函数里面写函数

在一个函数里面写函数，是说明外面的函数发生之后，里面的函数才发生例如：有的对话框是可以拖拽和移动的。这个就用了函数里面加函数的方式。鼠标点击对话框之后，再移动鼠标，对话框跟着鼠标动。如果不点击鼠标，只移动鼠标，对话框是不动的。所以先有鼠标点击，再有鼠标移动。需要在点击函数的函数内，加移动事件的函数。...

原创 函数里面有一个默认参数e

e 代表鼠标事件参数，这个参数是个对象，不同的鼠标事件，里面有好多属性和方法。比如 e.clientX (鼠标经过页面，可见区域的横坐标的值)        e.clientY就是事件的属性鼠标点击，鼠标经过，鼠标按下。。。等等一系列鼠标事件（人机交互）使用时候，鼠标距离上面和左面的可视区域距离       e.keyCode（点击键盘某个键，的值，点击向下键的值是40）...

原创 宽高自适应

把html&amp;&amp;body的样式都设置成{width:100%;height:100%;}整个页面的宽高就都可以用百分比设置宽度和高度了。就可以自适应各种屏幕的分辨率了。

原创 JS有很多重复模块重复代码

函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了 比如在网站里，有很多弹出框都是一样的，JS部分也是一样的，只有一小部分是改变的，这种改变的地方变成函数的参数就可以了，重复的部分改写成函数。然后再调用函数名字就好了。这样会减少复制粘贴代码 函数作用:代码重用，封装...

原创 formValidation验证，记录

&lt;div class="modal fade" id="ajaxForm" tabindex="-1" role="dialog" aria-labelledby="ajaxFormLabel" aria-hidden="true"&gt;                            &lt;div class="modal-dialo

原创 各种框架的图标，都是图片，只要PS改图片就可以改样式了

原创 改ztree的字体，配置没有相关设置，就找压缩的css源码，然后自己重建一个Css修改样式

配置没有设置字体大小的方式，就只能自己找原CSS。 

原创 layer图标不出现

用layer的时候，弹出框的右上角最大化和删除按钮一直不显示，好久找不到原因，以为是代码的问题，JS和CSS包都引入了，可是就是不出来，后来猜到，是图片没有引入的问题，所以图标没有出现...

转载 用户浏览器Http向服务器请求数据的过程

一、概念    Tomcat 服务器是一个开源的轻量级Web应用服务器，在中小型系统和并发量小的场合下被普遍使用，是开发和调试Servlet、JSP 程序的首选。二、原理    Tomcat结构图：                    Tomcat主要组件：服务器Server，服务Service，连接器Connector、容器Container。连接器Connector和容器...

原创 switch

 //为同一个元素绑定多个不同的事件,指向相同的事件处理函数  my$("btn").onclick = f1;  my$("btn").onmouseover = f1;  my$("btn").onmouseout = f1;  function f1(e) {    switch (e.type) {      case "click":        alert("好帅哦")...

原创 三目表达式

liArr[i].style.backgroundColor =  num % 2 == 0 ? 'pink' :'red' 三目表达式里面的条件语句，是双等号

原创 if语句

if语句的条件语句 （） 里面的等号是双等   ==   不等于用！=    总弄错，总用一个等号‘=’，忘记用两个等号‘==’

原创 JS容易出现的又容易被忽略的小错误

JS中会用好好多次，变量命名，样式命名，ID命名。并且，会多次引用变量名，样式名，ID名。再次引用的时候，很容易写错，所以，一定要复制，不要自己背着写，这些小错误，很容易被忽略，却影响整个程序。...

原创 Echart中的data

Echart中的实例，有的数据不是本地的，可以查其它同类实例的数据(数据是本地的)，还有官网上，每个类型的图表，都有本地数据的标准格式

原创 自定义对象（构造函数）

自定义对象=====构造函数自定义对象就像一个仓库，存储着属性（变量）和方法（构造函数里写的函数方法）。自定义对象也像是一个人，他有姓名，身高，体重（属性），他可以去帮你取东西，能帮你做饭，能帮你打扫房间（方法）。 document.getElementById("")这个获取的是元素，也是一个对象，对象里面早就定义好的方法可以调用，比如click。document也是一个对象。....

原创 Echart圆形的树状图

Echart里面有树状图和关系图是有区别的要根据数据的特点选择用哪一个关系图大多是圆的，表面看上去，跟圆形的树状图很像，但是，实质的数据关系是不一样的。选择图表的类别很重要。一开始选错了，结果就都错了，尽力做的都没有用。...

原创 SVG转换成字体，把图标做字体在HTML中使用

打开Iconfont-阿里巴巴矢量图标库的首页，在阿里里面可以把svg转成字体格式，生成字体文件和css文件；使用的时候，在项目中引用字体文件，和css，在html中，加上字体图标的样式名就可以了。网站生成的css文件，里面引入了网站生成的图标字体文件，当在自己写的文件里，引入生成的css文件时候，要改一下，css里面的引入字体文件的路径；整个项目的图标要放到一个项目里。有新增的图...

原创 JS排序------------- sort() 方法

例： 1.不传参数，将不会按照数值大小排序，按照字符编码的顺序进行排序；var arr = ['General','Tom','Bob','John','Army'];        var resArr = arr.sort();        console.log(resArr);//输出   ["Army", "Bob", "General", "John", "Tom"] ...

原创 脱离文档流

div要移动，添加动画，要脱离本来的文档流把div脱离文档里：+position:absolute;top:10px;left:10px;right:10px;bottom:10px; div的父级元素里：+position:relative 因为，正常div是排队的。...

原创 给div添加滚动条

最简单的方法：　　&lt;div style="height:300px;width:100px;overflow:auto"&gt;&lt;div/&gt;（height和width根据需求设定）　　　　注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，...

原创 双引号与单引号

变量的拼接，用双引号；JSon数据用双引号；当里面是双引号的时候，外面要用单引号；外双内单，外单内双；对象.innerHTML=‘&lt; img src="images/bg-1"  alt="美女”  /&gt;’；其它时候，用单引号或双引号都可以；...

原创 切图的图标项目结束后，要留源文件

图标要留源文件，这样改的时候，会很快。图标有很多时候是一个类型的，留一个源文件，就把同类型相似却不同的样式全保存了，只是有的隐藏了。需求会总变，源文件留下，改就方便了...

原创 工作经验点滴记录

最新版的Echart4.0比2.0容易用，很多需要原生JS写的部分，都被4.0设置成了新配置。用的时候，可以查找官网上的配置项  css3选择列表的奇数行ul li:nth-child(odd){/*奇数行*/         background-color: #f2f2f2;        }ul li:nth-child(even){/*偶数行*/       ...

原创 Echarts图表里面如果有按钮，下拉菜单，用绝对定位，不会占用图表的位置，否则会影响图表效果

CSS 如何进行绝对定位详解绝对定位的父级元素要设置相对定位1.绝对定位属性：position 值： absolute 通过指定left,top绝对定位一个元素设置了绝对定位的元素，相当于该元素被从原文档中删除了 所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档&lt;style&gt;p.abs{  position: absolute;  ...

原创 用排除法找出现问题的原因，别死钻牛角尖

Echart写X轴左右正负浮动的时候，柱状图X移到负向，得把数据变成负数，但是页面显示的得是正数，就需要用绝对值的函数来处理，formatter:函数。加上函数之后，效果一直没实现，找了很久原因，一直以为是函数写错了，或者用的Echart版本太低。后来发现是下面有重名的函数。formatter:函数。出现了两次，没用的那个把有用的覆盖了。所有函数没生效。一般出现的问题都是小问题，容易被忽略...

原创 echarts图Y周坐标轴文字过长的解决方案

解决方案在翻看echarts文档的过程中我看到了坐标轴文字可以自行定义模板，于是想到了我给一个固定12的字数限制，超出部分以省略号代替，这样就不会造成图形范围忽大忽小了。axisLabel: {  color: "#000",  interval: 0,  formatter: function(value) {    if (value.length &gt; 12) {   ...

转载 Echart怎么把X轴反转

具体实现代码如下 解决echarts 负轴，浮动负数，等的显示function chart_rkk(){    var rkkchart=echarts.init(document.getElementById('rkkDiv'));    var ageArea = [ '0~10','11~30','30~60','60~100','100以上'];    var FbarData...

原创 Echart

 // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('x_count_echart'));         // 指定图表的配置项和数据        var option = {            color: ['#52BEDB'], //柱状图的颜色   ...

原创 echarts改变折线图和折线点的颜色

最近在做echart，每次更新一点，记录一点完成之后方便进行大的总结//（1）改变折线点和折线的颜色series: [    {      name: "温度",//鼠标放在折线点上显示的名称      type: "line",//折线图      symbol: 'circle',//折线点设置为实心点      symbolSize: 4,   //折线点的大小     ...

原创 echart折线图，柱状图，饼图设置颜色

好记性不如烂笔头！！！1、折线图修改颜色： xAxis: {           type: 'category',           boundaryGap: false,           data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']       },       yAxis: {           ty...

原创 修改bootstrap下拉菜单的宽度

&lt;!-- Single button --&gt;&lt;div class="btn-group"&gt; &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded=&

原创 div超出宽度自动换行

div{ width: 500px;word-break: break-all;word-wrap: break-word; }

原创 毫秒转日期

var dt = new Date();dt.valueOf();dt2 = new Date(dt.valueOf());