admin管理员组

文章数量:815367

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每日一练经典小案例(一)