admin 管理员组文章数量: 1086061
JavaScript每日一练经典小案例（一）
一、密码显示隐藏效果
先看效果：
通过分析，我们可以看到通过改变文本属性可以实现文本显示
代码实现原理：通过判断眼睛的点击事件改变
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#flag{border: 1px solid red;width: 20px;}</style>
</head><body><form>账号<input type="text"><br>密码<input type="password" id="password"><h1 id="flag">*</h1></form><!-- js --><script>var pw = document.getElementById('password');var flag = document.getElementById('flag');// 设置临时元素用于判断改变文本属性var tp = 0;flag.onclick = function () {if (tp == 0) {pw.type = 'text';tp = 1;} else {pw.type = 'password';tp = 0;}}</script>
</body>
</html>
代码效果
二、列表全选和反选效果
先看效果：
素材代码
<style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}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><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 Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div></body>
分析：我们指导checked属性可以控制列表的选择
我们通过将表头的checked属性赋值给下面
js实现代码
<script>//上面的j_cbAll选中，下面的j_tb选中//利用checkbox属性进行选中var j_cbAll = document.getElementById('j_cbAll');var j_tbs = document.getElementById('j_tb').querySelectorAll('input');j_cbAll.onclick = function () {//利用循环改变每个input的checked属性for (let i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}</script>
扩展
反选效果
分析 下面复选框不选，上面取消选择 通过循环判断下面有没有选中。
js代码
//全选时，下面有取消 全选checked = flsefor (let i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function () {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中for (let i = 0; i < j_tbs.length; i++) {if (!j_tbs.checked) {flag = false;break;}}j_cbAll.checked = flag;}}
三、tab栏切换
先看效果：
素材代码
<head> <style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（50000）模块内容</div><div class="item">手机社区模块内容</div></div></div>
</body>
- 第一部分
分析：我们可以看到京东的这个tab栏切换，首先变换了头部标题的颜色和下面商品的内容
那我们也可以拆成两个部分 通过点击某个选项卡改变颜色 也就是这个class类 ，其他的清除样式
那就是先清除所有样式在给这个正在点击的标题，提供样式。
- js代码
<script>var tab_ls = document.querySelector('.tab_list');var lis = tab_ls.querySelectorAll('li');var divs = document.getElementsByClassName('item');//通过循环绑定点击事件for (let i = 0; i < lis.length; i++) {//点击某个选项卡改变颜色 也就是这个class类 ，其他的清除样式lis[i].onclick = function () {for (let i = 0; i < lis.length; i++) {//先清除所有的样式lis[i].className = '';}//在赋值正在点击的选项卡this.className = 'current';
</script>
效果：
- 第二部分
第一部分实现后，我们可以看到下面的内容没有跟着上面的变化。
通过看源码我们可以指导 item是可以获取到索引的，那如何与上面对应。
我们可以自定义一个index索引通过element.getAttribute()获取
然后再改变 item的display属性进行隐藏和显示
js代码
var tab_ls = document.querySelector('.tab_list');var lis = tab_ls.querySelectorAll('li');var divs = document.getElementsByClassName('item');//通过循环绑定点击事件for (let i = 0; i < lis.length; i++) {//第二部分： 给每个li标签设置索引号方便对应Divlis[i].setAttribute('index', i);//第一部分：点击某个选项卡改变颜色 也就是这个class类 ，其他的清除样式lis[i].onclick = function () {for (let i = 0; i < lis.length; i++) {//先清除所有的样式lis[i].className = '';}//在赋值正在点击的选项卡this.className = 'current';//第二部分：获取自定义的索引号var index = this.getAttribute('index');//console.log(index);//同样的思想先清除所有人的样式for (let i = 0; i < divs.length; i++) {divs[i].style.display = 'none';}//在给点击的样式根据Div的索引对应自定义的 显示内容divs[index].style.display = 'block';}}
完整效果：
本文标签： JavaScript每日一练经典小案例（一）
版权声明：本文标题：JavaScript每日一练经典小案例（一） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1697111146a261790.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论