魏彬的仓库
0%

Posted on Edited on In

安卓手机和苹果手机body或者是外层div高度值不一样。安卓手机body或者是外层高度的高度要重新赋值，安卓手机高度要通过获取window的高度 然后赋值给body或者最外层div 代码如下
还要把body 设为relative

1
2
3
4
5
6
7
8
9
10
11
12
13
$("input,textarea").focus(function(){
			var win_h = $(window).height();  //关键代码
			$("body").height(win_h);  //关键代码

			var head_h  = $("#header").height();
			console.log(head_h)
			var num = $(this).offset().top-head_h;
			$("html,body").animate({scrollTop:num},800);
			$("html,body").css("height","800px")
		}).blur(function(){
			$("html,body").css("height","auto")
		})
		})
1
2
3
4
5
6
7
8
9
if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       window.setTimeout(function() {
         document.activeElement.scrollIntoViewIfNeeded();
       },0);
     }
   })
 }

Posted on Edited on In

100个请求，最大并发10 ，最后得到一个数组，是所有请求的返回结果，顺序和请求地址数组一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const urls = []

 for(var i=0 ; i<10; i++) {
   urls.push(`https://newcar.xcar.com.cn/auto/index.php?r=Ajax/GetUsedCars&province_id=${i}`)
 }

 conCurRequest(urls,3).then(res=>{
   console.log(res)
 })

 function conCurRequest(urls,maxNum) {
    return new Promise(resolve=>{
        if(urls.length === 0) {
          resolve([])
          return 
        }
        const results = []
        // 每次取出这个索引指向的URL地址
        let index = 0
        // 请求完成的数量
        let count = 0; 
        async function request() {
          //如果发送的地址超过了URL数组的长度 
          if(urls.length === index) {
            return
          }


          //保存之前的url数组的index,按顺序保存入返回的数组用
          const i = index;              
          let url = urls[index]
          console.log(url)
          index++;
          
          try{
            const reps = await fetch(url)
            results[i] = reps
          }catch(e) {
            //不管成功或者失败，都把结果按顺序放入数组中
            results[i] = err
          }
          finally{
            //无论成功失败都继续发送下一次请求
            request()
            count++;
            //发送所有url完成 reslove结果
            if(urls.length === count) {
              console.log('所有请求都已完成')
              resolve(results)
            }
          }
         
        }
         const times = Math.min(maxNum,urls.length);
         for(var i=0; i< times; i++) {
           request()
         }

    })        
 }


js 深拷貝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function deepClone(obj={}){
    if(typeof obj !='object' || obj != null){
        // obj如果不是对象或者数组，是null，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if(obj instanceof Array){
        result = []
    }else{
        result = {}
    }

    for(let key in obj){
        // 保证 key 不是原型的属性
        if(obj.hasOwnProperty(key)){
            // 递归调用！！！！
            result[key] = deepClone(obj[key])
        }
    }
    // 返回结果
    return result
}

let obj1 = {
    age:20,
    name:'xxx',
    address:{
        city:'beijing'
    },
    arr:['a','b','c']
}

let  obj2 = deepClone(obj1)

obj2.age = 21;
console.log(obj1.age) // 20;




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
export const $ = function() {
  var copyIsArray,
    toString = Object.prototype.toString,
    hasOwn = Object.prototype.hasOwnProperty,

    class2type = {
      '[object Boolean]': 'boolean',
      '[object Number]': 'number',
      '[object String]': 'string',
      '[object Function]': 'function',
      '[object Array]': 'array',
      '[object Date]': 'date',
      '[object RegExp]': 'regExp',
      '[object Object]': 'object'
    },

    type = function(obj) {
      return obj == null ? String(obj) : class2type[toString.call(obj)] || "object";
    },

    isWindow = function(obj) {
      return obj && typeof obj === "object" && "setInterval" in obj;
    },

    isArray = Array.isArray || function(obj) {
      return type(obj) === "array";
    },

    isPlainObject = function(obj) {
      if (!obj || type(obj) !== "object" || obj.nodeType || isWindow(obj)) {
        return false;
      }

      if (obj.constructor && !hasOwn.call(obj, "constructor") &&
        !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
        return false;
      }

      var key;
      for (key in obj) {}

      return key === undefined || hasOwn.call(obj, key);
    },

    extend = function(deep, target, options) {
      for (var name in options) {
        var src = target[name];
        var copy = options[name];

        if (target === copy) {
          continue;
        }

        if (deep && copy &&
          (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
          if (copyIsArray) {
            copyIsArray = false;
            var clone = src && isArray(src) ? src : [];

          } else {
            var clone = src && isPlainObject(src) ? src : {};
          }

          target[name] = extend(deep, clone, copy);
        } else if (copy !== undefined) {
          target[name] = copy;
        }
      }

      return target;
    };

  return { extend: extend };
}();

比较两个元素（可以是数组，字符串，对象）是否相等

https://juejin.cn/post/6989513100856672293

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 实现如下效果
const obj1 = {a: 10, b: {x: 100, y:200 }}
const obj2 = {a: 10, b: {x: 100, y:200 }}
isEqual(obj1, obj2) === true

function isObject(obj){
    return typeof obj === 'object' && obj != null
}
function isEqual(obj1,obj2){
    //
    if(!isObject(obj1) || !isObject(obj2)){
        return obj === obj2
    }
    if(obj1===obj2){
        return true
    }
    // 两个都是对象或数组，而且不相等
    // 1.先取出 obj1 和 obj2 的keys  比较个数
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
    if(obj1Keys.length != obj2Keys.length){
        return false
    }
    // 2.以obj1为基准，和obj2 依次递归比较
    for(let key in obj1){
        // 比较当前的key的val
        const res = isEqual(obj1[key],obj2[key])
        if(!res){
            return false
        }
    }
    // 3.全相等
    return true
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const obj = {
        name : "1",
        other:{
            name:'imooc'
        }
      }

      const obj1 = {
        name : "1",
        other:{
            name:'imooc'
        }
      }

      function compare(obj1,obj2){
         //如果只比较数组，字符串，数字 直接返回真
         if(obj1 == obj2){
            return true
         }
         //对象的key的数量不一样返回假
         if(Object.keys(obj1).length!== Object.keys(obj2).length){
            return false
         }
         //循环 对象 如果key的值还是一个对象递归判断
         for(let k in obj1){
            if(Object.prototype.toString.call(obj1[k]) == "[object Object]"){
                return compare(obj1[k],obj2[k])
            }
            else if(obj1[k]!==obj2[k]){
                return false
            }
         }

         return true
      }


      console.log(compare(obj,obj1))


取最大值最小值之间随机的一个数

1
2
3
4
5
6
7
8
function Random(min,max)
  {
    var num = max - min + 1; //最大值 - 最小值 +1 取得最小和最大之间可能有几个值
    return Math.floor(Math.random() * num + min)  //高级程序设计中提到的公式，P136
  }

  console.log(Random(0,5))
  {% endhighlight %}

利用 apply 取数组中最大或最小值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//因为不支持Math.max([1,2,3])这种写法，就是不能直接传入一个数组,
//但是它支持Math.max(param1,param2...)
//所以可以变相通过 apply（apply和call的区别就是传入参数不同）
//调用的时候第一个参数给了null，这是因为没有对象去调用这个方法，我只需要用这个方法帮我运算，得到返回的结果就行，所以直接传递了一个null过去。
var arr = [1,2,3,5,6];
function getMax(arr){
    return Math.max.apply(null,arr)
}
function getMin(arr){
    return Math.min.apply(null,arr)
}
alert(getMax(arr));
alert(getMin(arr));

//ES6 写法
Math.max(...[1,2,3])  //3

点击按钮，有三种状态 一直输出 1,2,3…1,2,3…1,2,3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
   <button onclick="fn1()">click</button>
   <div id="txt"></div>
   <script type="text/javascript">
      var a = 0;

      var txt = document.getElementById('txt')
      function fn1(){
        a = a + 1;
        console.log(a%3)
      }

   </script>
</body>

统计出现次数最多的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
String.prototype.max_num = function(){
    var obj = {}
    var res;
    var max_num = 0;
    var max_key;
    for(var i=0; i<this.length; i++)
    {
        res = this[i];
       if(!obj[res])
       {
            obj[res] = 1
       }
       else
       {
            obj[res]++;
       }
    }
    for(var key in obj)
    {
        if(max_num < obj[key])
        {
            max_num = obj[key];
            max_key = key;
        }

    }

    return max_key

}

alert(str.max_num())

手写 flatern 考虑多层级（数组拍平）

1
2
3
4
5
6
7
8
9
10
11
12
13
function flat(arr){
    //验证arr中还有没有深层数组
    const isDeep = arr.some(item=>item.instanceof Array)
    if(!isDeep) return arr
    const res = Array.prototype.concat.apply([],arr)
    return flat(res)
}
const res = flat([1,2,[3,4]])
console.log(res)               // [1,2,3,4]

Array.prototype.flat([depth])  //默认为1,Infinity 无限层


数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Array.prototype.unique1 = function()
	{
		var n = [];
		for(var i=0; i< this.length;i++)
		{
			if(n.indexOf(this[i]) == -1)
			{
				n.push(this[i])
			}
		}
		return n;
	}

	var array1 = [1,2,2,4,4,1,5,6]
	var s = array1.unique1();
	console.info(s)

全选全不选反选

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="button" value="全选/全不选" id="button1" />
<input type="button" value="反选" id="button2" />
<div id="div1">
	<input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
window.onload = function()
	{
			var flag = true;   //全选，全不选的按钮的标志
			var btn1 = document.getElementById("button1");
			var btn2 = document.getElementById("button2");
			var oDiv = document.getElementById("div1");
			var aInput = oDiv.getElementsByTagName("input");
			//初始让所有复选框都不选中，为了兼容IE FF
			for(var i=0 ;i<aInput.length;i++)
			{
				aInput[i].checked = false;
			}

			btn1.onclick = function()
			{
				if(flag)
				{
					for(var i=0 ;i<aInput.length;i++)
					{
						aInput[i].checked = true;
					}
					flag = false;
				}
				else
				{
					for(var i=0 ;i<aInput.length;i++)
					{
						aInput[i].checked = false;
					}
					flag = true;
				}


			}

			btn2.onclick = function()
			{
				for(var i=0 ;i<aInput.length;i++)
				{
					if(aInput[i].checked == true)
					{
						aInput[i].checked = false
					}
					else
						aInput[i].checked = true;
				}
			}
	}

Posted on Edited on In

less常用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
body{font-size: 20px;}

/*我是被编译的*/
//我是不被编译的

/*变量*/
@testWidth:300px;
.div{width: @testWidth}

/*混合 就是复用别的样式，加入自己独特的样式，DIV1的样式和DIV基本一样，多了个border*/
.border{border:5px solid #000}
.div1{
  height:29px;
  .div;
  .border;
}

/*混合带参数*/


.border2(@border_width)
{
  border:@border_width solid #ccc;
}

.div3{
  .border2(25px)
}


/*混合带默认参数*/
.border3(@border_width:10px)
{
  border: @border_width solid #ccc;
}
.div4{
  .border3()
}

/*css3兼容性混合列子*/
.borderRadius(@radius:5px)
{
  -webkit-border-radius:@radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.div5{
  height: 30px;
  width: 30px;
  .borderRadius(3px);
}

/*三角*/
.triangle(top,@w:15px,@c:#ccc )
{
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:15px,@c:#ccc )
{
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(left,@w:15px,@c:#ccc )
{
  border-width:@w;
  border-color:transparent @c transparent transparent;
  border-style:dashed solid dashed dashed;
}

.triangle(right,@w:15px,@c:#ccc )
{
  border-width:@w;
  border-color:transparent transparent transparent @c;
  border-style:dashed dashed dashed solid;
}
//@_ 代表无论上边选了谁，都带着这个内容
.triangle(@_,@w:15px,@c:#ccc)
{
  width: 0;
  height:0;
  overflow: hidden;
}

//调用
.sanjiao{
  .triangle(bottom,30px,red);
}


/*运算*/
@test:300px;
.test{
  width: @test+20*5;
}

/*嵌套*/
.list{
  width: 600px;
  li{
    float:left;
      p{
        width:100px;
      };
      &_content{
        color:red;
      }
  }
  a{
    text-align: center;
    //&代表他的上一层选择器
    &:hover{
      color:red;
    }
  }

  .ly{
    width: 111px;
    &_ly{
      width: 121px;
    }
  }
}



/*避免编译，比如calc这种*/
.cc{
  width: calc(300px-30px);
}
.cc{
  width: ~'calc(300px-30px)';
}

Posted on Edited on In

IE8问题汇总及解决方案

1,调整浏览器渲染模式 

1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">




2,针对双核浏览器

1
<meta name="renderer" content="webkit">

3,IE8无法识别 Media Query

推荐采用Respond.js

4,H5新标签

html5shiv

5,background-size: cover

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

6,inline-block下padding元素重叠

使用float: left替代display: inline-block实现水平布局

7,placeholder

使用插件比如：https://github.com/mathiasbynens/jquery-placeholder 或者使用JS实现

8,es5的一些属性，方法(主要是针对数组那些)

es5-shim

9，echarts图表在ie8里不显示

(1)ajax由get传值改成post传值。(2)配置图表时去掉最后面的一项数据后面的逗号。

10，d3在ie8不显示问题

try{。。。}catch{ 。。。}容错解决。并进行友好提示。

11，行内样式垂直居中问题，有时line-height和高度相等在ie8无效果

加vertical-align：middle;解决

12，button按钮左右两边的留白的问题

用overflow:visible;padding:0;

13，hack方法解决一些边距等问题

针对仅ie8内input框文字不居中的问题单独写css后缀加\9区分

14，z-index失效

给元素都添加postion:relative

15，table的隔行变色 用nth-child(even)不兼容

用JQUERY实现

16，Ajax获取数据的时候用get有的时候由于后台传的汉字转译之后太长，会导致ie取不到后台的数据

改成用post

17，文字有和图片，表单一行的时候，在IE8中布局会乱

文字的行高一定要写的和Input（image、select等等）一样高，外边上下的边距不要用行高撑开，用margin或者padding都行，只用高度撑开的话在ie8中会布局乱。

18，marin不起作用

塌陷问题，常见于浮动布局，解决方案1清除浮动 2，给父及元素加overflow:hidden;

19，IE8 不支持CSS3 选择器，

1. 可引入 selectivizr-min.js 解决。selectivizr-min.js 需要其它js库进行支持，不同js库对其支持程度不同，推荐使用nwmatcher.js。两者结合可满足CSS3 绝大多数选择器。<!- -[if (gte IE 6)&(lte IE 8)]>

1
2
3
 <script type="text/javascript" src="Lib/nwmatcher.js"></script>
          <script type="text/javascript" src="Lib/selectivizr-min.js"></script
<![endif]- ->

20 CSS属性颜色渐变linear-gradient

渐变做法使用hack技术添加一纯色背景。background-color: #f5840c\9;

21，IE 缓存过大，比如一些请求，或者动态更换img地址等

请求后加时间戳

22，ajax在ie8，ie9之下有时候不能跨域

使用 jquery.xdomainrequest.min.js 解决

23，echarts部分图表在ie8之下二次加载的时候不能清空

每次在加载之前清空容纳图表的容器

24,ajax在ie8，ie9之下有时候不能跨域

使用 jquery.xdomainrequest.min.js 解决

Posted on Edited on In

下面这段代码 放在JS中 设计稿640宽度，字体可以量出设计稿的PX，除以100

1
2
3
4
5
6
7
8
9
10
11
new function (){
	var _self =  this ;
	_self.width = 640; // 设置默认最大宽度
	_self.fontSize = 100; // 默认字体大小
	_self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
	_self.changePage =  function (){
	document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
	}
	_self.changePage();
	window.addEventListener('resize', function (){_self.changePage();}, false );
	};

Posted on Edited on In

display:inline-block间隙问题

IE8以上可以直接在父元素加font-size:0,或者使用margin-left负值

Posted on Edited on In

星级评价CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>sell</title>
    <style>
    .chStar {
        height: 14px;
        width: 73px;
        background-image: url(./chStar.png);
        display: inline-block;
        overflow: hidden;
    }
    
    .chStar01 {
        background-position: 0 0;
    }
    
    .chStar02 {
        background-position: 0 -20px;
    }

    .chStar03 {
        background-position: 0 -40px;
    }
    
    .chStar04 {
        background-position: 0 -60px;
    }
    
    .chStar05 {
        background-position: 0 -80px;
    }
    
    .chStar06 {
        background-position: 0 -100px;
    }
    
    .chStar07 {
        background-position: 0 -120px;
    }
    
    .chStar08 {
        background-position: 0 -140px;
    }
    
    .chStar09 {
        background-position: 0 -160px;
    }
    
    .chStar10 {
        background-position: 0 -180px;
    }
    </style>
</head>

<body>
    <div class="chStar chStar03"></div>
</body>

</html>



百度