前端小技术(不定期更新...)

点击图片进行全屏演示，禁止上下滑动页面

//点击全屏演示事件里写$('body').css("overflow", "hidden")//点击关闭全屏演示事件里写$('body').css("overflow", "auto")

禁用form表单的回车提交事件

<form name="form1" action="action/soft_add_action.php" enctype="multipart/form-data" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();">//加上onkeydown="if(event.keyCode==13)return false;" 就ok了

# 纯CSS实现文字超过n行后省略

  overflow: hidden;  text-overflow: ellipsis;  display:-webkit-box;  display:box;  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;

开启GPU硬件加速模式,让浏览器在渲染动画时从CPU转向GPU

为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);

写一个评分组件

let rate = 2''.slice(5 - rate, 10 - rate)

利用解构赋值快速交换数值

let a = 1let b = 2
[b, a] = [a, b]

十进制指数

1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

向下取整（双重非位运算）

Math.floor(4.9) === 4 //true~~4.9 === 4 //true

将字符串转换为数字类型

var a='2'a=+atypeof a //"number"

ios嵌入h5页面，禁止用户手动缩放页面

    <meta name="viewport"   content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

控制input文本框只能输入数字

不带小数点的

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >

带小数点的

<input type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" >

带小数点的并且限制小数点后只有两位

<input oninput="this.value=/^\d+\.?\d{0,2}$/.test(this.value) ? this.value : this.value.substring(0,this.value.length-1)"  value="" type="text">

js通过文件的url下载文件到本地 具体可参考

function funDownload(content, filename) {    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();    // 然后移除
    document.body.removeChild(eleLink);
};//第二种方法module.exports = {    downloadFile: function (src, name) {        var $a = document.createElement('a');
        $a.setAttribute("href", src);
        $a.setAttribute("download", name || '');
        setTimeout(function () {            var evObj = document.createEvent('MouseEvents');
            evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
            $a.dispatchEvent(evObj);
        }, 0)
    }
}

强制英文单词断行(经测试，数字也适用)

div{  word-break:break-all;
}

作者：李佳明同学
链接：https://www.jianshu.com/p/04e252f25ac2