目录
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没被选中时, 全选按钮就不被选中