JavaScript-前端学习二阶段-案例练习二

目录

1、轮播图

2、倒计时

3、加密手机号

4、文字滚动

5、选择文本替换内容

6、数组去重

7、数组中对象排序

8、点击从小到大排序or随机排序按钮切换图片

9、表格添加删除全选


1、轮播图

要求:1、图片每隔2s就自动切换    2、左右箭头点击事件,切换上一张/下一张图片  3、小圆点对应当前图片有背景样式

思路:1、页面布局box>ul>li>img,图片切换,移动ul,使用间隔定时器,实现无缝轮播,最后一张图片与第一张图片相同  

          2、当鼠标移入box时图片停止轮播即关闭定时器,鼠标移出则开启定时器

          3、左右箭头事件,上一张图n--,下一张图n++

          4、每个小圆点设置自定义属性获取到下标,统一设置小圆点初始样式,再设置当前的小圆点样式

2、倒计时

要求:点击开始按钮计算用户输入值的时间倒计时

思路:1、创建当前时间,创建未来时间即获取用户输入的时间

        2、通过毫秒数计算,倒计时=未来时间-当前时间 ;cha = future.getTime() - current.getTime();  

        3、毫秒数all = parseInt(cha / 1000);秒数s = all % 60; 分钟数m = parseInt(all / 60 % 60); 

           小时数 h= parseInt(all / 60 / 60 % 24);天数: d = parseInt(all / 60 / 60 / 24);

3、加密手机号

要求:手机号的某几位为*,不让显示出来

思路:利用字符串.splice(起始下标,结束下标)对手机号某几位进行截取,再str.replace()用*号进行替换

4、文字滚动

要求:1、开启定时器每隔1秒, 在before中截取出第一个字, 添加到第二个after中, before中保留从第二个字开始到最后一个

          2、当上面的文本没有文字,定时器就停止  

思路:下面文本接收该字符通过substring截取上面文本中的第一个字符,上面文本内容变为截取完的剩余字符,若无字符则定时              器停止

5、选择文本替换内容

要求:1. 点击替换按钮      2. 获取到要替换的内容和被替换进来的内容      3. 查找文本中的替换内容,将它换成新的内容

思路:将用户输入值作为分隔符存入数组(split),再将替换值用join连接并设置span标签为其添加背景色

6、数组去重

要求:删除数组里的重复项

思路:方法一    1、删除掉重复的项,拿数组的每一项和后面的任何一项去做比较,去掉重复的项,双层for循环

                         2、splice(起始下标,要删除的个数,项1,项2,项n)--实现添加、删除、替换

          方法二    1、遍历数组, 将不重复的项, 添加到一个新的数组中

                         2、indexOf查找要找的项,找到返回元素下标,找不到返回-1

7、数组中对象排序

要求:对数组中的对象,按date降序排序,若date值相同,则比较DIU的值再降序排列

                  结果为

 思路:1、利用sort方法将arr中的对象作为参数传入 arr.sort(function(x, y) {};console.log(x, y);//参数是每两个相邻的项,对象

            2、date值是时间,通过Date.parse(字符串格式化时间) 得到时间戳-毫秒数进行比较大小,若date值同,则比较DIU值

8、点击从小到大排序or随机排序按钮切换图片

要求:1、点击从大到小排序, 页面内容从美女8排序到美女1, 按钮文字变成从小到大

           2、点击从小到大排序, 页面从美女1-- - > 美女8排序, 按钮文字变成从大到小

           3、点击随机排序,图片随机排序

思路:1、将图片地址和对应的描述存于数组中

          2、按大小排序:  var tag = 1; //假设1是从小到大的顺序显示, 按钮显示的文字就是从大到小

          3、随机排序:用random生成随机数并去重

9、表格添加删除全选

要求:实现用户表单输入值添加到表格中,点击全选复选框则全选中,能够删除复选框选中的行

思路:1、页面布局table>tbody>tr>td,创建td节点,并添加节点内容,创建tr 将td添加进tr

          2、删除行后,后面的行下标会提前设置i--,去掉重复的下标值保证行的下标不重复

          3、全选①点击全选按钮, 让下面的所有的复选框跟着全选的状态走

                      ②当最后一个input复选框选中的时候, 全选按钮被选中,若有一个input没被选中时, 全选按钮就不被选中

猜你喜欢

转载自blog.csdn.net/qq_41008567/article/details/106123054