- 博客(8)
- 收藏
- 关注
RSS订阅原创 动态生成表格案例
动态生成表格案例分析 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关注的人