一些方法记录
//获取图片原始宽高
function getImgNaturalDimensions(oImg, callback) {
var nWidth, nHeight;
if (!oImg.naturalWidth) {
nWidth = oImg.naturalWidth;
nHeight = oImg.naturalHeight;
callback({w: nWidth, h:nHeight});
} else {
var nImg = new Image();
nImg.onload = function() {
var nWidth = nImg.width,
nHeight = nImg.height;
callback({w: nWidth, h:nHeight});
}
nImg.src = oImg.src;
}
}
getImgNaturalDimensions(e.querySelector('img'),function (_img) {
console.log(_img.w)
console.log(_img.h)
})//复制文字
document.querySelector('.j-copy-mail').onclick=function(){
var _copymail = this.innerText
var flag = copyTextToClipboard(_copymail)
flag ? layer.msg(_copymail+' 已複製!',{offset: '128px'}) : layer.msg('複製失敗請重試!',{offset: '128px'})
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful
} catch (err) {
var msg= false
}
document.body.removeChild(textArea);
return msg
}
}//flex布局
<div class="box">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
</div>//对应css
.b1{
background: #cccccc;
order:2;
/*flex是flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写*/
flex:1 1 auto; /*等分放大缩小*/
flex:0 0 auto; /*不放大不缩小*/
}
.b2{
background: #eeeeee;
order:1;
/*默认auto,或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性*/
flex-basis:auto;
flex-basis: 500px;
/*表示是否继承父元素的 align-items属性，若没有父属性，默认stretch*/
align-self: auto;
}
.b3{
background: #939393;
/*有用，更改元素排列 0开始，数字越小越靠前*/
order:0;
/*默认0，用于决定项目在有剩余空间的情况下是否放大，0不放大，即使设置了固定宽度也会放大*/
/*若有多个1，则剩余空间平分*/
flex-grow:1;
/*默认1，用于决定项目在有剩余空间的情况下是否缩小，即空间不足时大家一起等比例缩小*/
flex-shrink:0;/*设置了这个为0后，即使缩小父box，时，其它两项会缩小，但这项不会缩小宽度*/
}
.b1,.b2,.b3{
text-align: center;
font-size: 60px;
line-height: 300px;
width: 30%;
width: 600px;
}
.box{
display: flex;
/*width: 1200px;*/
height: 900px;
/*控制排序方向与顺序*/
flex-direction: row-reverse;/*321*/
flex-direction: column;/*纵 123*/
flex-direction: column-reverse;/*纵321*/
flex-direction: row;/*123*/
/*控制是否换行*/
flex-wrap: nowrap; /* 不换行，假设你200，子设置多少都没用，则是会 200/3来计算子容器*/
flex-wrap: wrap; /*换行，假设父200，子300，共3个，则子实际变为200 = 父*/
flex-wrap: wrap-reverse;
flex-flow:row wrap;/* flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap */ /*推荐*/
/* 横轴处理*/
justify-content:flex-start;/*左对齐*/
justify-content:space-between;
justify-content:flex-end;
justify-content:space-around;/* 两边为中间隔的1/2 */
justify-content:space-evenly; /*间距一致*/
/*纵轴处理*/
align-items:stretch;/*默认 如果项目没设置高度，或高度为aut 则占满整个屏幕o*/
align-items:flex-start; /*子容器在顶部*/
align-items:flex-end; /*子容器在底部*/
align-items:center;
/*注意：当flex-direction:column,时，justify-content 与 align-items 横纵轴会发过来*/
/*用于控制多行，一行，不会起效果*/
align-content:stretch;/**/
align-content:center;
align-content:space-between;
}// splice(位置，删除几个，插入)
//插入
var _arr = ['A','B','C','D']
_arr.splice(2,0,'F') //['A', 'B', 'F', 'C', 'D'] 第二个位置，插入一个F
console.log(_arr)
console.log(_arr.splice(2,0,'F')) //[]
//删除
var _arr = ['A','B','C','D']
_arr.splice(2,1)
console.log(_arr) // ['A', 'B', 'D'] 第二个位置，删除一个元素
console.log(_arr.splice(2,0)) //[]
//替换
var _arr = ['A','B','C','D']
_arr.splice(2,1,'F') //替换第三个字符为 F
console.log(_arr) // ['A', 'B', 'F', 'D']
console.log(_arr.splice(2,1,'F')) //['F']
_arr.unshift('E','F') //插前
_arr.push('E','F') //插后
_arr.shift() //删前
_arr.pop() //删后//箭头函数
//两个参数
const sum = (num1,num2) =>{
return num1 + num2
}
//一个参数
const power = (num) =>{
return num * num
}
------> 一个参数时，() 可省
const power1 = num =>{
return num * num
}
//fn代码中有一行代码 特殊写法
const mul = (num1,num2)=>num1 * num2
console.log(mul(11, 22));//数组操作 filter map reduce
//通常：取出所有小于100的数字
const nums = [222,111,2222,333,123,10,20,30,50]
let newNums = []
for(let n of nums){
if(n<100){
newNums.push(n)
}
}
console.log(newNums);
--------------------------------------------------------------------------
//filter 中的回调必须返回一个boolean值 ：
//true,内部自动将回调的n加到新的数组中
//false，自动过滤此次n
const nums2 = [222,111,2222,333,123,10,20,30,50]
let nne = nums2.filter(function (n) {
return n < 100 //返回一个bl值
})
console.log(nne); // [10, 20, 30, 50]
--------------------------------------------------------------------------
//map 如果需要对每个数据的每次回都操作，则用map
const mapArr = [222,111,2222,333,123,10,20,30,50]
let nne2 = mapArr.map(function (n) {
return n*8
})
console.log(nne2); // [1776, 888, 17776, 2664, 984, 80, 160, 240, 400]
--------------------------------------------------------------------------
//reduce 对数据中所有的内容进行汇总
//reduce(fn,0)
//fn必须传两值：(前一个值即上一个返回值，初始值)
const reduceArr = [1,2,3,4,5,6,7,8,9,10]
let reduceArr2 = reduceArr.reduce(function(preV,n){
return preV + n
},0)
console.log(reduceArr2) //55
//第一次 preV = 0 n = 1
//第二次 PreV = 1 n = 2
//第三次 PreV = 2 n = 3
...
//最后一次 PreV = 9 n = 10//获取Json长度
function getJsonLength(jsonData){
var jsonLength = 0;
for(var item in jsonData){
jsonLength++;
}
return jsonLength;
}//数组去重
var _arr = ['','apple','bannna',123,321,'','',123,'bannna']
console.log([...new Set(_arr)]) //["", "apple", "bannna", 123, 321]