三栏布局移动优先设计
flex 实现即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> &…
HTML 和 CSS 实现两栏布局
CSS 可以通过使用浮动、弹性盒子布局（Flexbox）、网格布局（Grid）等方式实现两栏布局。下面是三种常见的实现方式： 1. 浮动布局 HTML 结构： <div…
CSS 实现平行四边形
使用 skewX .parallelogram { width: 200px height: 200px background: red transform: skewX(18deg) }…
使用 Promise 封装 AJAX 请求
function myFetch(url, method, params) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.onreadystatechange …
使用 setTimeout 实现 setInterval
function mySetInterval(fn,delay,...args) { let cancel = false const task = () => { setTimeout(() => { if (!cancel) { fn(...args) task() …
网络请求超时 5s 未完成就终止
利用 AbortController 实现请求终止，fetch 和 axios 都支持，xhr 也能适配 function timeoutFetch(url,time) { const abortController = new AbortCo…
实现一个 sleep 延迟函数
一行代码轻松搞定，简简单单简洁方便。 const timer = time => new Promise(resolve => setTimeout(resolve, time))…
CSS 实现一个 扇形
使用 transform skewX 绘制平行四边形，然后用圆进行 overflow 即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met…
移动端 1px 的老问题
移动端时，由于设备 DPR 问题，CSS 1px 会被物理像素渲染成 2px 或者 3px， 造成实际看到的 1px 会更粗一些。需要渲染为真实的 1px。 0.5px 通过媒体…
实现一个连续调用多次并延迟的函数
实现一个函数，返回的函数调用时，连续调用5次，每次延时 1000s 基本递归 function repeat(cb, count, delay) { return function anoymouse(...args) …
