前端小记


最近写了挺多东西,在这里记录以下,方便自己也方便大家。

1.form 标签一定要加 method 属性例如method="post"

2.如果表单里用了 onsubmit 属性,想要禁止回车刷新则需在 form 标签里加入onsubmit="return false;"

3.登陆按钮不建议使用type="submit",这也会导致回车刷新

4.修改侧边滚动条样式,使用官方webkit,如下:

/ 浏览器滚动条样式 /

/ width /
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/ Track /
::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
    border-radius: 8px;
}

/ Handle /
::-webkit-scrollbar-thumb {
    background: rgb(201, 201, 202);
    border-radius: 8px;
}

/ Handle on hover /
::-webkit-scrollbar-thumb:hover {
    background: rgb(162, 162, 163);
}

5.JS小工具:

// 1.日历
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));

// 2.生成长度为11的随机ID
Math.random().toString(36).substring(2);

// 3.获取URL的查询参数
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;

// 4.本地实时时间
document.querySelector('#time').onload =  setInterval(() =>time.innerHTML = new Date().toLocaleString().slice(10, 19));

// 5.数组混淆
(arr) =>arr.slice().sort(() =>Math.random() - 0.5)
/* example
let a = (arr) =>arr.slice().sort(() =>Math.random() - 0.5)
let b = a([1,2,3,4,5])
console.log(b)
*/

// 6.生成随机十六进制代码(生成随机颜色)
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

// 7.一个面试题,让你写出它的结果
for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'

// 8.数组去重
[...new Set(arr)]

// 9.创建特定大小的数组
[...Array(3).keys()]

6.JS显示当前网页结构


javascript: (function(){
    var style = document.querySelector('#_outline_');
    if (style) {
        style.parentNode.removeChild(style);
    } else {
        style = document.createElement('style');
        style.id = '_outline_';
        style.innerHTML = "*{outline: 1px solid red}";
        document.body.appendChild(style);
    }
})();

如有更好的,欢迎留言~

声明:有限可能|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 前端小记


Something for nothing