- 博客(8)
- 收藏
- 关注
原创 动态生成表格案例
动态生成表格案例分析 1.因为里面的数据都是动态的,我们需要js动态生成。这里我们模拟数据,自己定义好数据,数据我么采用对象形式存储 2.所有的数据都是放在tbody里面 3.因为行很多,我们需要循环创建多个行(对应多少人) 4.每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格,并且把数据存入里面(双重 for循环) 5.最后一列单元格是删除,需要单独创建单元格 &l...
2020-05-06 15:53:24
1623
原创 倒计时案例 时分秒
介绍 现在时间 到 未来某一时间 还有多长时间 未来时间手动输入(2020-3-1 18:00:00) 倒计时案例分析 1.这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval) 2.三个黑色盒子分别存放时分秒 3.三个黑色盒子利用innerHTML放入计算的时分秒数 4.第一次执行也是间隔毫秒数,因此刚刷新会有空白 5.最好采用封装函数的方式,这样可以先调用一次这个函数,防...
2020-05-06 15:48:34
538
原创 Tab选项卡案例
案例分析 1.Tab栏切换有2个大的模块 2.上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式 3.下面的模块内容,会随着上面的选项卡变化而变化,所以下面的模块变化写到上面的选项卡点击事件里 4.规律:下面的模块显示内容会随着上面的选项卡一一对应,相匹配 5.核心思路:给上面的tab_list里面所有的li添加自定义属性,属性值从0开始编号 6.当我们点击t...
2020-05-06 15:29:15
488
原创 表单全选和反选案例
介绍 当点击全选按钮时,单选按钮也会有对勾; 当取消全选按钮的对勾时,单项按钮全部清空; 当单选安利全部被点击时,全选按钮会自动打钩; 案例分析 1.全选和取消全选做法:让下面的所有复选框的checked属性(选中状态)跟随 全选按钮即可 2.下面复选框需要全部选中,上面全选才能选中 做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看所有的小复选按钮是否有没选中的,如果有一个没选中,上面的...
2020-05-06 15:27:05
424
1
原创 鼠标经过的行,变色
案例分析 1.用到鼠标经过onmouseover 鼠标离开 onmouseout 2.核心思路:鼠标经过tr行。当前的行变背景颜色,鼠标离开去掉当前颜色 3.注意:第一行(thead里面的行)不需要边换颜色,因此我们获取的是tbody里面的行 HTML代码,如下所示 <!DOCTYPE html> <html> <head> <meta charset...
2020-05-06 15:22:22
595
原创 仿京东放大镜案例
分成三个模块 模块一:鼠标经过黄色小盒子 mask ,黄色的遮挡层和大图片盒子 big 显示,离开则隐藏两个盒子 1.就是显示和隐藏 模块二:黄色的遮挡层会跟随鼠标走 1.把鼠标坐标给遮挡层不合适,因为遮挡层坐标以父盒子left为准 2.首先是获得鼠标在left盒子的坐标 3.之后把数值给黄色遮挡层作为left和top值 4.此时用到鼠标移动事件,但是还是在left盒子内移动 5.发现,遮挡层...
2020-05-06 15:15:12
419
原创 简单的3s内盒子消失
熟悉定时器的使用 setTimeout(调用函数,延迟的毫秒数) 3秒之后盒子消失 案例分析: 1:5秒后把盒子隐藏起来 2:使用定时器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="...
2020-05-06 15:05:56
360
原创 网页轮播图案例
案例分析 一、鼠标经过轮播图模案例块,左右按钮显示,离开隐藏 二、点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮一样 1.声明一个变量num 点击一次 自增1 让这个变量乘以图片的宽度,就是ul的滚动距离 2.借助无缝滚动原理 3.把ul第一个li复制一份,放到ul的最后面 4.当图片滚动到克隆的最后一张图片时,让ul快速的、不做动画的跳到最左侧:left=0 5.同时num赋值为0,就可...
2020-05-06 14:38:58
610
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人