JS练习案例
关注
分享
扫一扫
从浅入深，来学习js相关的案例。
玉安_ZhangDe
web前端后进之学。
咬定青山不放松，自缘身在破岩中。
千磨万击还坚劲，任尔东西南北风。
展开
-
案例：tab栏切换
案例说明：1、一个标题对应一个div内容栏 ；2、遍历标签，给标题创建自定义属性index；3、在遍历标签的循环内，将遍历所有的div都设为隐藏，只显示当前index对应的那个div。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini..原创 2022-05-16 20:13:36 · 358 阅读 · 2 评论 -
案例：全部选中 & 全部取消选中
案例说明：1、选中全选框，底下的子选择框全部选中。2、取消选中全选框，底下的子选择框全部取消选中。3、子选择框全部选中，全选框自动选中，如果有一个子选择框取消选中，则取消全选框选中。.<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * ..原创 2022-05-16 20:00:22 · 586 阅读 · 0 评论 -
案例：仿淘宝固定侧边栏
效果图：案例分析: 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document 滚动到某个位置，就是判断页面被卷去的上部值。 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset 其实这个值 可以通过盒子的 offsetT...原创 2022-05-12 23:54:39 · 209 阅读 · 0 评论 -
案例：仿京东淘宝商品放大镜
效果图：项目需求：使鼠标移动到商品图上，有一层遮罩显示范围，并将其显示的范围放大显示到右侧主要涉及到的知识：1、获取元素2、注册事件3、鼠标监听事件 mousemove、mouseover、mouseout4、通过获取元素修改css样式5、获取鼠标在页面的坐标（e.pageX,e.pageY）6、获取子元素在有相对定位（relative）里的偏移量 xxx.offsetLeft xxx.offsetTop用到的素材代码：<!..原创 2022-05-12 23:44:18 · 372 阅读 · 0 评论 -
案例：登录框拖拽
效果图：主要涉及到的知识：1、获取元素2、鼠标监听事件 click、mousedown、mousemove、mouseup3、注册事件，删除事件4、通过获取元素修改css样式5、获取鼠标在页面的坐标（e.pageX,e.pageY）6、获取子元素在有相对定位（relative）里的偏移量 xxx.offsetLeft xxx.offsetTop代码：<!DOCTYPE html><html lang="en"><head>.原创 2022-05-12 22:01:56 · 231 阅读 · 0 评论 -
JS案例：倒计时
// 倒计时效果// 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。// 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。// 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）// 转换公式如下： // d = parseInt(总秒数/ 60/60 /24); // 计算天数// h = parseInt(总秒数/ 60/60 %.原创 2022-05-10 23:13:09 · 293 阅读 · 0 评论 -
for 循环案例：求学生成绩案例
// 弹出输入框输入总的班级人数(num)// 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到// for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num// 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）// 弹出结果var num = prompt('请输入班级的总人数:'); // num 总的班级人数var sum = 0; // 求和的变量var average = 0; // 求平均值的变量f.原创 2022-04-29 22:31:05 · 1817 阅读 · 0 评论 -
for 循环案例
1. 求1-100之间所有数的平均值 2.求1-100之间所有偶数和奇数的和3. 求1-100之间所有能被3整除的数字的和原创 2022-04-29 22:29:05 · 631 阅读 · 0 评论 -
js案例：for循环嵌套if条件分支语句
for (var i = 0;i < 100;i++) { if (i == 30){ console.log('三十而立'); }else if (i == 40){ console.log('四十不惑'); }else if (i == 50){ console.log('五十而耳顺'); ...原创 2022-04-29 22:22:48 · 1694 阅读 · 0 评论 -
JS案例练习：逢七过
案例简介1-100 之间 逢7过 数字中包含7 或者 7的倍数都要跳过代码详情for(var i = 1;i <= 100;i++){// 不属于 7的倍数 & i/10的余数为7的 展示数据 将 i/10 转换为int，余数都为整数，并且全不等来判断 if(i % 7 != 0 && i % 10 != 7 && parseInt (i / 10) !== 7){ console.log(i); c.原创 2022-04-29 21:34:34 · 2083 阅读 · 0 评论 -
JS案例练习：判断闰年案例
//算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年// 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中// 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句// 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0var year = prompt('请您输入年份：');if (year.原创 2022-04-29 21:13:03 · 418 阅读 · 0 评论