1.水平垂直居中
两种方式定位或者flex
//定位 div { width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } //flex 父级控制子集 .parent { display: flex; justify-content: center; align-items: center; }
2.css一行文本超出…
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
3. 多行文本超出显示
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
4. localStorage
localStorage.name = 'yd'; // 获取 localStorage.name; // yd // 删除 delete localStorage.name; // 清除全部 localStorage.clear(); // 遍历 for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); // 获取本地存储的Key localStorage[key]; // 获取本地存储的value }
5.防抖
function debounce(fn, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) } } // 测试 function task() { console.log('run task') } const debounceTask = debounce(task, 1000) window.addEventListener('scroll', debounceTask)
6. 节流
function throttle(fn, delay) { let last = 0 // 上次触发时间 return (...args) => { const now = Date.now() if (now - last > delay) { last = now fn.apply(this, args) } } } // 测试 function task() { console.log('run task') } const throttleTask = throttle(task, 1000) window.addEventListener('scroll', throttleTask)
