不请求后端前端实现分页功能
1、声明页数和页码 let page=1 let size=10 let dataList [] 2、通过数组slice方法截取 dataList.slict((page-1)*size, (page-1)*size size) 起始位置：(page-1)*size 终止位置： (page-1)*size size) 根据数组索引位置截取来实现翻页效果 当page=1截取的位置是0到9 当page=2截取的位置是10到19 当page=3截取的位置是20到29
CSS优先级算法
CSS优先级：是由四个级别和各级别的出现次数决定的。 四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。 优先级的算法： 每个规则对应一个初始"四位数"：0、0、0、0 若是 行内选择符，则加1、0、0、0 若是 ID选择符，则加0、1、0、0 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0 若是 元素选择符/伪元素选择符，则分别加0、0、0、1 ...
前端常用正则校验规则
1、校验手机号码 // 正则 const regex = /^1[3456789]d{9}$/; 2、校验邮箱地址 // 正则 const regex = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/; 3、校验身份证号码 // 身份证号码为15位或18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X const regex = /^[1-9]d{5}(19|20)d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$/; 4、校验密码强度 // 正则 const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/; 5、校验 URL 地址 // 正则 const regex = /^(http|https)://([w-] .) [w-] (:d )?(/S*)?$/; 6、校验 IP 地址 const regex = /^([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5])$/; 7、校验中文名 // 正则 const regex = /^[u4e00-u9fa5]{2,4}$/; 8、校验首位不为零的数字 // 正则 const regex = /^[1-9]d*$/; 9、校验只允许字母和数字 // 正则 const regex = /^[A-Za-z0-9] $/;
css样式表的三种方式
1、行内样式表 <div style="width: 100px; height: 100px">style属性的设置</div> 2、内部样式表 <div class="box">类标签设置</div> 3、外部样式表 <!-- CSS链接样式 --> <link type="text/css" rel="styleSheet" href="/css.css" /> <!--CSS导入式 --> <link type="text/css" rel="styleSheet" href="/css.css" /> <style type="text/css"> @import url("/css.css"); </style>
网页图片不存在时的以下两种处理方法
图片不存在会触发onerror事件，我们通过触发该事件后进行以下方式处理。 1、把图片元素隐藏 <img src="图片地址" onerror="this.style.display='none'" /> 2、替换成默认图片 <img src="图片地址" onerror="this.src='默认图片的地址'" />
JavaScript复制文本到剪切板中
判断navigator.clipboard是否为undefined，因为navigator.clipboard对象只能在安全网络环境中才能使用，比如在localhost或者https中才能正常使用，直接用ip地址和http访问出现undefined，所以需要表单元素来实现。 HTML部分 <body> <button id="copy">复制</button> <div id="text">你好啊</div> </body> JavaScript部分 <script> var copy = document.getElementById('copy') copy.onclick = function copy(e) { var text = document.getElementById('text') if (navigator.clipboard && window.isSecureContext) { return navigator.clipboard.writeText(text.innerHTML) } else { let input = document.createElement('input') document.body.appendChild(input) input.value = text.innerHTML input.focus() input.select() if (document.execCommand('copy')) { document.execCommand('copy') } input.blur() document.body.removeChild(input) } } </script>
JavaScript常用的日期时间方法大全
let date = new Date(); // 获取中国标准时间 date.getFullYear(); / /获取完整的年份(4位) date.getMonth(); // 获取当前月份(0-11,0代表1月) date.getDate(); // 获取当前日(1-31) date.getDay(); // 获取当前星期(0-6,0代表星期天) date.getTime(); // 获取当前时间的时间戳 date.getHours(); // 获取当前小时数(0-23) date.getMinutes(); // 获取当前分钟数(0-59) date.getSeconds(); // 获取当前秒数(0-59) date.getMilliseconds(); //获取当前毫秒数(0-999) date.toLocaleDateString(); // 获取当前日期 date.toLocaleTimeString(); // 获取当前时间 date.toLocaleString(); // 获取当前日期与时间 date.setFullYear(); // 设置年份信息 获取该年份当前月日时分秒的时间戳 date.setMonth(); // 设置月份信息 获取该月份当前年日时分秒的时间戳 (0-11,0代表1月) date.setDate(); // 设置日信息 获取该日当前年月时分秒的时间戳 date.setHours(); // 设置小时信息 获取该小时当前年月日分秒的时间戳 date. setMinutes(); // 设置分信息 获取该分当前年月日时秒的时间戳 date.setSeconds(); // 设置秒信息 获取该秒当前年月日时分的时间戳
原生JavaScript绑定事件的3种方法
1.行内绑定：在标签上写οnclick=“事件名” <button onclick="handleClick">Click Me</button> 2.在script中绑定 document.getElementById("标签").onclick=function(){ /* 函数体 */ } 3.绑定事件监听函数 绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数 元素选择器.addEventListener(事件名（click,keydown...）, 回调函数, true捕获/false冒泡); 移除事件监听 document.getElementById("选择的标签").removeEventListenner('click')
dom创建与dom操作
创建：新的标签(元素节点) = document.createElement("标签名") 删除：父节点.removeChild(子节点); 插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点 追加：appendChild(新的节点的名) 当前对象追加一个子节点
热门头条
活跃用户
