1. 循环精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { list-style: none; margin: 0; padding: 0; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: pink; margin: 15px; background: url(images/sprite.png) no-repeat; } </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } </script> </body> </html>
处理左边这样的精灵图的时候，只有y左边的不同，这个时候就可以使用for循环将所有的图标同时显示出来
2.鼠标经过表格，那一行变色，鼠标离开，恢复原来的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: pink; } </style> </head> <body> <table> <thead> <tr> <th>代码</th> <th>名称</th> <th>最新公布净值</th> <th>累计净值</th> <th>前单位净值</th> <th>净值增长率</th> </tr> </thead> <tbody> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> </tbody> </table> <script> //1. 获取元素 获取的是tbody里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2.循环注册绑定事件 for (var i = 0; i < trs.length; i++) { // 3.鼠标经过事件 trs[i].onmouseover = function() { this.className = 'bg'; } // 4. 鼠标离开事件 trs[i].onmouseout = function() { this.className = ''; } } </script> </body> </html>
3. 按钮全选
1. 点击上面全选复选框，下面所有的复选框都选中(全选)
2. 再次点击全选复选框，下面所有的复选框都不中选(取消全选)
3. 如果下面复选框全部选中，上面全选按钮就自动选中
4. 如果下面复选框有一个没有选中，上面全选按钮就不选中
5. 所有复选框一开始默认都没选中状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .wrap { width: 300px; margin: 100px auto; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"> </td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>ipad</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>mac</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>apple watch</td> <td>2000</td> </tr> </tbody> </table> </div> <script> // 1.全选和取消全选 让下面所有的复选框的checked属性 跟随 全选按钮即可 var j_cbAll = document.getElementById('j_cbAll'); //全选按钮 var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 注册事件 j_cbAll.onclick = function() { // this.checked得到当前复选框的选中状态 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; } } // 2.下面复选框需要全部选中， 上面全选才能选中做法: 给下面所有复选框绑定点击事件，每次点击，都 // 要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].onclick = function() { // flag控制全选按钮是否被选择 var flag = true; //每次点击下面的复选框都要循环检查所有的小按钮是否全部选中 for (var i = 0; i < j_tbs.length; i++) { if (!j_tbs[i].checked) { flag = false; break; } } j_cbAll.checked = flag; } } </script> </body> </html>
4. tab栏切换（排他思想）
当鼠标点击上面相应的选项卡(tab)，下面内容跟随变化
1. Tab栏切换有2个大的模块
2. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想) 修改类名的方式
3. 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
4. 规律:下面的模块显示内容和上面的选项卡一一对应，相匹配。
5. 核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
6. 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏(排他思想)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .detail { width: 978px; } .detail_tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .detail_tab_list li { height: 39px; line-height: 39px; float: left; padding: 0 20px; text-align: center; cursor: pointer; } .detail_tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 10px; } .item_info li { line-height: 22px; } .current { background-color: red; } </style> </head> <body> <div class="detail fr"> <div class="detail_tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>规格与包装</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="detail_tab_con"> <div class="item"> <ul class="item_info"> <li>分辨率：1920*1080(FHD)</li> <li>后置摄像头：1200万像素</li> <li>前置摄像头：500万像素</li> <li>核 数：其他</li> <li>频率：以官网信息为准</li> <li>品牌：Apple关注</li> <li>商品名称：APPLEiPhone 6s plus</li> <li>商品编号：1861098</li> <li>商品毛重：0.51kg</li> <li>商品产地：中国大陆</li> <li>热点：指纹识别，Apple pay，金属机身，拍照神器</li> <li>系统：IOS</li> <li>像素：1000-1600万</li> <li>机身内存：64GB</li> </ul> </div> <div class="item">规格与包装</div> <div class="item">规格与包装</div> <div class="item">商品评价</div> <div class="item">手机社区</div> </div> </div> <script> // 获取元素 var tab_list = document.querySelector('.detail_tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); // 循环绑定点击事件 // js代码执行的时候，for循环就执行完，并给每个button绑定事件，点击按钮的时候，执行当前按钮绑定的事件。 // 也就是说，点击按钮的时候，执行的是对应的回调函数，跟for循环没啥关系了。 for (var i = 0; i < lis.length; i++) { // 开始给5个li 设置索引号属性 lis[i].setAttribute('index', i); lis[i].onclick = function() { // 1.tab栏模块 排他思想，点击某一个，底色变为红色，其他不变 // 干掉所有人 其余的li 清除class这个类 for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } // 留下我自己 this.className = 'current'; // 2. 下面的模块内容，会跟随上面的选项卡变化 // 设置一个索引号属性 var index = this.getAttribute('index'); // 干掉所有人 让其余的item隐藏起来 for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } // 留下我自己 让对应的item显示出来 items[index].style.display = 'block'; } } </script> </body> </html>
4. 下拉菜单（节点操作）
知识点：parentNode.chilren[i]
鼠标经过出现下拉菜单，鼠标离开下拉菜单隐藏
1 导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件
2 核心原理: 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } </style> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> </ul> <script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = 'block'; } lis[i].onmouseout = function() { this.children[1].style.display = 'none'; } } </script> </body> </html>
五、CSS三角之美
使用CSS模拟出三角形的效果
<style> div { /* 我们用css模拟三角效果 */ width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 10px solid blue; border-left: 10px solid pink; } p { width: 0; height: 0; border-style: solid; border-width: 10px; border-color: red transparent transparent transparent; /* font-size: 0; */ line-height: 0; } </style> </head> <body> <div></div> <p></p> </body>
六、倒计时函数
function countDown(time) { var nowTime = +new Date(); //返回当前时间总的毫秒数 var inputTime = +new Date(time); //返回输入时间的总毫秒数 var times = (inputTime - nowTime) / 1000; //剩余时间总的秒数 var d = parseInt(times / 60 / 60 / 24); d = d < 10 ? '0' + d : d; var h = parseInt(times / 60 / 60 % 24); h = h < 10 ? '0' + h : h; var m = parseInt(times / 60 % 60); m = m < 10 ? '0' + m : m; var s = parseInt(times % 60); s = s < 10 ? '0' + s : s; return d + '天' + h + '时' + m + '分' + s + '秒'; }
七、倒计时
1 这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
2 三个黑色盒子里面分别存放时分秒
3 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
4 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
5 最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1.获取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2020-6-18 00:00:00'); //返回输入时间的总毫秒数
// 先调用一次这个函数，防止第一次刷新的时候页面停留在初始值（因为页面刚刷新会停留1s才调用）
countDown();
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown(time) {
var nowTime = +new Date(); //返回当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时 给黑色盒子
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
</html>
