前端小技术 一

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

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

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

//加上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 = 1
let 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=+a
typeof a //"number"

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

    

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

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

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;
}

你可能感兴趣的:(前端小技术 一)