1-1.全选、全不选

  1. <body>
  2.     <input class="like" type="checkbox">足球
  3.     <input class="like" type="checkbox">篮球
  4.     <input class="like" type="checkbox">排球
  5.     <input class="like" type="checkbox">游泳<br>
  6.     <button id="all">全选</button>
  7.     <button id="no">全不选</button>
  8.     <button id="reverse">反选</button>
  9.     <script>
  10.         var inputs = document.getElementsByClassName("like");
  11.         var all = document.getElementById("all");
  12.         all.onclick = function(){
  13.             for(var i =0;i<inputs.length;i++){
  14.                 inputs[i].checked = true;
  15.             }
  16.         }
  17.         var no = document.getElementById("no");
  18.         no.onclick = function(){
  19.             for(var i =0;i<inputs.length;i++){
  20.                 inputs[i].checked = false;
  21.             }
  22.         }
  25.     </script>
  26. </body>

1-2反选

  1. <body>
  2.     <input class="like" type="checkbox">足球
  3.     <input class="like" type="checkbox">篮球
  4.     <input class="like" type="checkbox">排球
  5.     <input class="like" type="checkbox">游泳<br>
  7.     <button id="reverse">反选</button>
  8.     <script>
  9.         var inputs = document.getElementsByClassName("like");
  10.         var reverse = document.getElementById("reverse");
  11.         reverse.onclick = function(){
  12.             for(var i =0;i<inputs.length;i++){
  13.                 console.log(inputs[i].checked);
  14.                 // if(inputs[i].checked == true){
  15.                 //     inputs[i].checked = false;
  16.                 // }
  17.                 // else{
  18.                 //     inputs[i].checked = true;
  19.                 // }
  21.                 // inputs[i].checked = (inputs[i].checked == true)? false:true;
  23.                 inputs[i].checked = !inputs[i].checked;
  24.             }
  25.         }
  26.     </script>
  27. </body>

2-1隔行变色

  1. <body>
  2.     <ul>
  3.         <li>0</li>
  4.         <li>2</li>
  5.         <li>2</li>
  6.         <li>3</li>
  7.         <li>4</li>
  8.         <li>5</li>
  9.         <li>6</li>
  10.         <li>7</li>
  11.         <button id="one">red</button>
  12.         <button id="two">orange</button>
  13.     </ul>
  14.     <script>
  15.         var lis = document.getElementsByTagName("li");
  16.         var one = document.getElementById("one");
  17.         one.onclick = function(){
  18.             for(var i=0;i<lis.length;i++){
  19.                 if(i%2==0){
  20.                     lis[i].style.color = "red";
  21.                 }
  22.             }
  23.         }
  24.         two.onclick = function(){
  25.             for(var i=0;i<lis.length;i++){
  26.                 if(i%2!=0){
  27.                     lis[i].style.color = "orange";
  28.                 }
  29.             }
  30.         }
  31.     </script>
  32. </body>

3-1三秒倒计时

3-1-1 setInterval实现

  1. <body>
  2.     <button id="btn">3</button>
  3.     <script>
  4.         var num=3;
  5.         var btn = document.getElementById("btn");
  6.         var timer = setInterval(function(){
  7.             num--;
  8.             console.log(num)
  9.             if(num>=0){
  10.                 btn.innerHTML = num;
  11.             }else{
  12.                 clearTimeout(timer)    ---清除定时器
  13.             }
  14.         },1000) 
  15.     </script>
  16. </body>

3-1-2 setTimeout实现

  1. <body>
  2.     <button id="btn">
  3.         3
  4.     </button>
  5.     <script>
  6.         var btn = document.getElementById("btn");
  7.         var num = 3;
  8.         function go(){
  9.             setTimeout(function(){
  10.                 num--;
  11.                 if(num>=0){
  12.                 btn.innerHTML = num;
  13.                 go();   
  14.                 }
  16.             },1000)
  17.         }
  18.         go();
  19.     </script>
  20. </body>

4-1导航栏nav

  1. <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         #nav{
  7.             height: 100px;
  8.             background-color: rebeccapurple;
  9.             width: 100%;
  10.             position: fixed;
  11.             opacity: 0;
  12.         }
  13.         body{
  14.             height: 2000px;
  15.         }
  16.     </style>

4-1-1

  1. <div id="nav"></div>
  2.     <script>
  3.         var nav = document.getElementById("nav");
  5.         window.onscroll = function(){
  6.             var scrollTop = window.scrollY;
  7.             console.log(scrollTop);
  8.             if(scrollTop>200){
  9.                  nav.style.opacity = 1;
  10.             }
  11.             else{
  12.                 nav.style.opacity = 0;
  13.             }
  14.             console.log(scrollTop)
  15.         }
  16.     </script>

4-1-2 渐隐渐现

  1. <div id="nav"></div>
  2.     <script>
  3.         var nav = document.getElementById("nav");
  4.         // 1、对窗口执行监听事件
  5.         window.onscroll = function(){
  6.             // 2、获取滚动条的高度
  7.             var scrollTop = document.documentElement.scrollTop;
  8.             // 3、得到透明度
  9.             console.log(scrollTop)
  10.             var opacity = scrollTop/200;   ---缓慢变化
  11.             if(opacity>1){
  12.                 opacity=1
  13.             }
  14.             nav.style.opacity = opacity;
  15.             console.log(opacity)
  16.         }
  17.     </script>

5-1 发送验证码

5-1-1 setInterval实现

  1. <body>
  2.     <button id="btn">发送验证码</button>
  3.     <script>
  4.         var btn = document.getElementById("btn");
  5.         var num = 5;
  6.         var timer ;
  7.         // 1、让按钮进入倒计时的状态（不能点击的状态）
  8.         btn.onclick = function(){
  9.             this.disabled = true;
  10.             this.innerHTML = num;
  11.             // 2、每过一秒 num--；
  12.             timer = setInterval(function(){
  13.                 num--;
  14.                 if(num>=0){
  15.                     btn.innerHTML = num;
  16.                 }else{
  17.                     btn.disabled = false;
  18.                     btn.innerHTML = "发送验证码";
  19.                     clearTimeout(timer);
  20.                     num = 5;
  21.                 }
  22.             },1000)
  23.         }
  24.     </script>
  25. </body>

5-1-2 setTimeout实现

  1. <body>
  2.     <button id="btn">发送验证码</button>
  3.     <script>
  4.         var btn = document.getElementById("btn");
  5.         var num = 5;
  6.         btn.onclick = function(){
  7.             this.disabled = true;
  8.             this.innerHTML = num;
  9.             function go(){
  10.                 setTimeout(function(){
  11.                     num--;
  12.                     if(num>=0){
  13.                         btn.innerHTML = num;
  14.                         go();
  15.                     }else{
  16.                     btn.disabled = false;
  17.                     btn.innerHTML = "发送验证码";
  18.                     num=5;
  19.                 } 
  20.                 },1000)
  21.             }
  22.             go();  
  23.         }
  24.     </script>
  25. </body>

6-1页面交互

  1.         <style>
  2.         .current{
  3.             color: sandybrown;
  4.             border: 1px solid sandybrown;
  6.         }
  7.         ul li{
  8.             width: 50px;
  9.             list-style-type: none;
  10.         }
  11.         .content>div:nth-child(2){
  12.             display: none;
  13.         }
  14.     </style>
  1. <ul>
  2.         <li class="current">登陆</li>
  3.         <li>注册</li>
  4.     </ul>
  5.     <div class="content">
  6.         <div>登陆的页面</div>
  7.         <div>注册的页面</div>
  8.     </div>
  11. <script>
  12.         // 点击对应的li给对应的li添加class="current"，给它的兄弟元素移除
  13.         var lis = document.querySelectorAll("ul li");
  14.         var divs = document.querySelectorAll(".content div");
  16.         for(var i=0;i<lis.length;i++){
  17.             lis[i].index = i;
  18.             lis[i].onclick = function(){
  19.                 for(var i=0;i<lis.length;i++){
  20.                 lis[i].className = ""    
  21.                 }
  22.             this.className = "current";
  23.             // 让所有的.current div隐藏，点击对应的下标的div，对应的元素显示
  24.             console.log(this.index);
  25.             for(var i=0;i<divs.length;i++){
  26.                 divs[i].style.display = "none"
  27.             }
  28.             divs[this.index].style.display = "block"    
  29.             }
  31.         }
  32.     </script>