dongbaihan / utils Goto Github PK

var arr1 = new Array(100);
for(var i=0;i<arr1.length;i++){
  arr1[i] = i;
}
console.log(arr1);

var arr2 = new Array();
for(var i=0;i<100;i++){
  arr2.push(i);
}
console.log(arr2);

var arr3 = new Array();
var i = 0;
while(i<100){
  arr3.push(i);
  i++;
}
console.log(arr3);

var arr4 = new Array();
var i = 0;
do{
  arr4.push(i);
  i++;
}
while(i<100)
console.log(arr4);

var arr5 = Object.keys(Array.apply(null, {length:100})).map(function(item){
  return +item;
});
console.log(arr5);

var arr6 = Array.from({length:100}, (v,k) => k);
console.log(arr6);

var arr7 = Array.from(Array(100), (v,k) =>k);
console.log(arr7);

var arr8 = new Array(100).keys();
console.log(Array.from(arr8));

var arr9 = [];
var i = 0;
var timer = setInterval(function(){
  arr9[i] = i++;
  if(i>=100){
    clearInterval(timer);
    console.log(arr9);
  }
},1);

var arr = [];
var i = 0;
function MakeArray(num){
  if(i<num){
    arr[i] = i++;
    MakeArray(num);
  }
  return arr;
}
console.log(MakeArray(100));

var arr11 = new Array(100).toString().split(‘,‘).map(function(item,index){
  return index;
});
console.log(arr11);

let str = '';
let newArr = [];
Object.keys(query).map((key) => {
        if (query[key]) {
            newArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
        }
})
return newArr.join('&');

<img src="xxx.png" alt="xxx" usemap="#mapId" />

<map name="mapId" id="mapId">
  <area shape="rect" coords="0,0,110,260" href="XXXX.htm" alt="XXXX" />
  <area shape="circle" coords="129,161,10" href="YYYYY.htm" alt="YYYY" />
  <area shape="poly" coords="0,0,12,14,299,300" href="ZZZZ.htm" alt="ZZZZ" />
</map>

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器的兼容问题），
所以我们应同时向 <map> 添加 id 和 name 属性。
area（带有可点击区域的图像映射） 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。


根据shape 属性值不同 coords 属性值也发生变化

/*根据分辨率自适应锚点区域坐标*/
    function changeCoords(){
        var width  = document.body.offsetWidth;
        var height = document.body.offsetHeith;
        if (1920 == width) return;
        var percent = width/1920;
        $(".act").each(function(){
            var coords = $(this).attr("coords");

            var arr = coords.split(",");
            for(var i=0;i<arr.length;i++){
                arr[i] *= percent;
            }
            var str = arr.join(",");
            $(this).attr("coords",str);
        });
    };
    changeCoords();

npm install lib-flexible

npm install --save-dev px2rem-loader postcss-plugin-px2rem

vue.config.js
chainWebpack: (config) => {
    ...
    config.module
        .rule('scss')
        // .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
        .loader('px2rem-loader')
        .before('postcss-loader')
        .options({
            remUnit: 75
        })
},
css: {
    loaderOptions: {
        postcss: {
            plugins: [
                require('postcss-plugin-px2rem')({
                    rootValue: 75, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                    // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                    // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                    // propBlackList: [], //黑名单
                    exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                    // selectorBlackList: [], //要忽略并保留为px的选择器
                    // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                    // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                    mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
                    minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
                })
            ]
        }
    }
}

package.json
"devDependencies": {
    ...
},
"postcss": {
    "plugins": {
        "autoprefixer": {},
        "precss": {}
    }
}