前端练习
关注
分享
扫一扫
仗剑天涯，从摘要开始
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
返回出现固定次数的数组元素 - 实战篇
function trimLenArr(arrar, retainLenArr) { /** 功能： 返回出现固定次数的数组元素 arrar 需要修剪的数组 retainLenArr 要返回指定重复数量的数组 */ let res = arrar.reduce((prev, currentValue) => { ...原创 2020-07-25 23:16:12 · 183 阅读 · 0 评论 -
图片懒加载原理及实现
原理：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。实现：<!DOCTYPE html...原创 2020-04-06 19:17:44 · 163 阅读 · 0 评论 -
关于在for循环中绑定事件打印变量i是最后一次！
其实函数引用的外部变量都是最后一次的值。image.png再来看一个例子：image.png如果你知道作用域链就好办多了，在这个函数里面的i其实引用的是最后一次i的值，为什么不是1,2,3,4...呢？因为在你for循环的时候，并没有执行这个函数，你这个函数是在你点击的时候才会执行的，当执行这个函数的时候，它发现它自己没有这个变量i，于是向它的作用域链中查找这个变量i...原创 2020-04-07 11:11:47 · 325 阅读 · 0 评论 -
Vue自定义指令实例（实时时间转换指令）
在很多论坛网站里面可以看到这样的信息：文章发表距离当前时间的时间间隔。我们来自定义一个指令v-time，将表达式传入的时间戳转换成相对时间。index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &l...原创 2020-04-01 16:22:31 · 304 阅读 · 0 评论 -
JS验证身份证格式并输出出生日期，年龄，性别，出生地示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>检验身份证格式并输出出生日期，年龄，性别，出生地</title></head><body><script> window.onloa...原创 2020-03-31 16:14:10 · 592 阅读 · 0 评论 -
vue使用model改变数据后导致已经push到数组中的数据也改变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...原创 2020-03-25 18:38:19 · 1527 阅读 · 0 评论 -
js原生缓慢返回顶部函数封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2020-02-24 20:33:20 · 208 阅读 · 0 评论 -
js原生，缓动动画封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2020-02-22 00:25:48 · 116 阅读 · 0 评论 -
js原生轮播图
window.addEventListener('load', function() { // 1. 获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = doc...原创 2020-02-21 23:04:40 · 134 阅读 · 0 评论 -
js原生网页轮播图
轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。3.图片播放的同时，下面小圆圈模块跟随一起变化。4.点击小圆圈，可以播放相应图片。5.鼠标不经过轮播图，轮播图也会自动播放图片。6.鼠标经过，轮播图模块， 自动播放停止。&...原创 2020-02-21 23:03:34 · 303 阅读 · 0 评论 -
案例：按钮拖动移动
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2020-02-20 17:16:04 · 208 阅读 · 0 评论 -
js随机点名器（简单）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-12-20 08:27:50 · 340 阅读 · 0 评论