5秒倒计时

  1.     <script>
  2.         var num =5;
  3.         var btn = document.getElementById("btn");
  4.         var timer
  5.         /* 1、让按钮进入倒计时的状态(不能点击的状态)*/
  6.         btn.onclick =  function(){
  7.             this.disabled = true;
  8.             this.innerHTML = num;
  9.             /* 2、每过1s num-- */
  10.             timer = setInterval(function(){
  11.                 num--
  12.                 if(num>=0){
  13.                     btn.innerHTML = num;
  14.                 }else{
  15.                     btn.disabled  = false;
  16.                     btn.innerHTML = "发送验证码";
  17.                     num =5;
  18.                     clearInterval(timer);
  19.                 }
  20.             },1000)
  21.         }
  24.         /* 使用setTimeout去实现 */
  25.     </script>

渐变滚动条

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{margin:0;padding:0}
  10.         #nav{
  11.             height: 50px;
  12.             background-color: #ff2d51;
  13.             position: fixed;
  14.             width:100%;
  15.             opacity: 0;
  16.         }
  17.         body{
  18.             height: 2000px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div id="nav">
  25.     </div>
  26.     <script>
  28.          /* 当滚动条滚动到距离顶部200px的时候 导航条完全显示 */
  30.         var nav = document.getElementById("nav")
  31.         /* 1、对窗口执行监听事件 */
  32.         window.onscroll = function(){
  33.            /* 2、获取滚动条的高度 */
  34.             var scrollTop = document.documentElement.scrollTop;
  35.             /* 3、得到透明度 */
  36.             var opacity = scrollTop/200;
  37.             if(opacity>1){
  38.                 opacity=1
  39.             }
  40.             nav.style.opacity = opacity;
  41.             console.log(opacity)
  43.         }
  44.     </script>
  45. </body>
  46. </html>

tab切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .current{
  10.             color:orange
  11.         }
  12.         .content{
  13.             width:100px;
  14.             height: 100px;
  15.             border:1px solid #333;
  16.             position: relative;
  17.         }
  18.         .content>div{
  19.             width:100%;
  20.             height: 100%;
  21.             position: absolute;
  22.         }
  23.         .content>div:first-child{
  24.             background-color: red;
  26.         }
  27.         .content>div:last-child{
  28.             background-color: yellow;
  29.             display: none;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <ul>
  35.         <li class="current">登录</li>
  36.         <li>注册</li>
  37.     </ul>
  38.     <div class="content">
  39.         <div>登录的内容</div>
  40.         <div>注册的内容</div>
  41.     </div>
  42.     <script>
  43.         var lis = document.querySelectorAll('ul li');
  44.         var divs = document.querySelectorAll('.content div')
  45.         for(var i = 0;i<lis.length;i++){
  46.             lis[i].index = i;
  47.             lis[i].onclick = function() {
  48.                 for(var i = 0;i<lis.length;i++) {
  49.                     lis[i].className = '';
  50.                 }
  51.                 this.className = "current";
  52.                 for(var i =0;i<divs.length;i++) {
  53.                     divs[i].style.display = 'none';
  54.                 }
  55.                 divs[this.index].style.display = 'block'
  56.             }
  57.         }
  58.     </script>
  59. </body>
  60. </html>

tab切换jquery方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="libs/jquery-3.6.0.js"></script>
  9.     <style>
  10.         .current{
  11.             color:orange
  12.         }
  13.         .content{
  14.             width:100px;
  15.             height: 100px;
  16.             border:1px solid #333;
  17.             position: relative;
  18.         }
  19.         .content>div{
  20.             width:100%;
  21.             height: 100%;
  22.             position: absolute;
  23.         }
  24.         .content>div:first-child{
  25.             background-color: red;
  27.         }
  28.         .content>div:last-child{
  29.             background-color: yellow;
  30.             display: none;
  31.         }
  32.     </style>
  33.     <script>
  34.         $(function(){
  35.             $(".dl li").click(function (){
  36.                 $(this).css("color","red").siblings().css("color","");
  37.                 var index = $(this).index();
  38.                 console.log(index);
  39.                 $(".content div").eq(index).show();
  40.                 $(".content div").eq(index).siblings().hide();
  41.             })
  42.         })
  43.     </script>
  44. </head>
  45. <body>
  46.     <ul class="dl">
  47.         <li >登录</li>
  48.         <li>注册</li>
  49.     </ul>
  50.     <div class="content">
  51.         <div>登录的内容</div>
  52.         <div>注册的内容</div>
  53.     </div>
  55. </body>
  56. </html>