原生JS小案例
文章平均质量分 88
蓝玉小轩
这个作者很懒,什么都没留下…
展开
-
原生JS-浏览器兼容性问题总结
1、获取元素:通用document.getElementById('id名');document.getElementsByTagName('标签名');IE9+ 支持document.getElementsByClassName('class名');document.querySelector('#id/.className/tag');document.querySelectorAll('#id/.className/tag');解决方案 先通过通用获取元素的方法如下,获取目标原创 2022-01-02 14:19:17 · 1012 阅读 · 0 评论 -
Canvas模拟钟表
HTML5 Canvas绘制表盘时钟原创 2021-12-24 10:42:06 · 442 阅读 · 0 评论 -
购物车全选按钮-原生JS源码实现
购物车全选按钮-原生JS源码实现描述:a、点击全选按钮,所有的checkbox选中,再次点击,所有的checkbox取消选中选中状态b、点击单个checkbox,当都选中时,全选要选中,当某一个没有选中时,全选不选中效果:原理:利用监听checked属性的状态(true/false)来动态设置复选框的状态 a.通过循环来设置下面复选框的状态,让其状态与全选的复选框状态保持一致。 b.添加计数器,记录下面复选框选中的个数,选中一个num = 1,选中n个num = n;如何实现呢原创 2021-09-04 14:25:42 · 2659 阅读 · 1 评论 -
js简单实现开关灯
js简单实现开关灯原理:(更换图片) 首先定义开关按钮,通过给开关按钮添加点击事件,以更换图片的的方式实现控制开关灯的效果。普通版:(两个开关,分别控制) 结构:两个按钮(button) + 一个图片(img) 样式:如代码(可根据自己爱好自行修改) 逻辑:对两个按钮分别添加点击事件,当点击开灯按钮时,将图片换成开灯状态的图片(注意图片的路径),点击关灯按钮时,将图片换成关灯状态的图片。<!DOCTYPE html><html lang="en"><h原创 2021-08-03 20:17:06 · 2410 阅读 · 2 评论 -
别样的简易轮播--JS原生实现
简易轮播图–原生JS实现描述: a.实现点击上一张,图片切换到上一张,点击下一张,图片切换到下一张 b.实现小圆点控制图片的显示 c.实现图片自动播放,当鼠标滑动到可视区暂停自动播放,鼠标离开,恢复自动播放 d.图的上方显示当前显示图片的索引号实现原理: 一个 count 行天下 1、通过设置计数器 count ,控制计数器的增减,实现对指定图片的显示 2、上一张、下一张按钮原理同样是控制 count 的自增自减 3、小圆点控制同样是根据小圆点的索引号与 cou原创 2021-09-04 15:45:07 · 86 阅读 · 0 评论