点击隐藏

  1.     <!-- 点击谁,将谁隐藏 -->
  2.     <ul>
  3.         <li>html</li>
  4.         <li>css</li>
  5.         <li>javascript</li>
  6.     </ul>
  7.     <script>
  8.         var lis = document.getElementsByTagName("li");
  9.         /* tips:只能对单个对象执行事件,不能对集合执行事件 */
  10.         for( var i=0;i<lis.length;i++){
  11.             lis[i].onclick = function(){
  12.                 console.log(this);
  13.                 this.style.display = "none"
  14.             }
  15.         }
  16.     </script>

更改css样式

  1.  <button id="app">发送验证码</button>
  3.     <script>
  4.         var app = document.getElementById("app");
  5.         app.onclick = function(){
  6.             this.innerHTML = "60";
  7.             this.style.backgroundColor = "#999";
  8.             this.style.color= "#fff";
  9.             this.style.fontSize ="40px"
  10.         }
  11.         /* 
  12.         更改css的语法
  13.         element.style.cssName
  14.          */
  15.         /* 
  16.         background-color backgroundColor
  17.         font-size  fontSize
  18.          */
  19.         /* 
  20.         color
  21.         font-size
  22.          */
  23.     </script>

复选框 全选 不选 反选

  1.     <input class="like" type="checkbox">足球
  2.     <input class="like" type="checkbox">篮球
  3.     <input class="like" type="checkbox">排球
  4.     <input class="like" type="checkbox">游泳  <br>
  5.     <button id="all">全选</button>
  6.     <button id="no">不选</button>
  7.     <button id="reverse">反选</button>
  9.     <script>
  10.         /* 
  11.         input输入框有属性checked
  12.         true  选中
  13.         false 没有选中
  14.          */
  15.         var inputs = document.getElementsByClassName("like");
  16.         var all = document.getElementById("all");
  17.         var no  = document.getElementById("no");
  18.         var reverse = document.getElementById("reverse");
  19.         /* 1、对btn执行点击事件 */
  20.         all.onclick = function(){
  21.             /* 2、让所有的input的状态为true */
  22.            for(var i=0;i<inputs.length;i++){
  23.                inputs[i].checked = true;
  24.            }
  25.         }
  26.         no.onclick = function(){
  27.             for(var i=0;i<inputs.length;i++){
  28.                inputs[i].checked = false;
  29.            }
  30.         }
  31.         reverse.onclick = function(){
  32.             for(var i=0;i<inputs.length;i++){
  33.                 console.log(inputs[i].checked)
  34.                 inputs[i].checked = (inputs[i].checked ==  true)? false:true;
  35.             }
  36.         }
  37.     </script>

奇偶行变色

image.png

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

渐显导航栏

  1.     <style>
  2.         *{margin:0;padding:0}
  3.         #nav{
  4.             height: 50px;
  5.             background-color: #ff2d51;
  6.             position: fixed;
  7.             width:100%;
  8.             opacity: 0;
  9.         }
  10.         body{
  11.             height: 2000px;
  12.         }
  13.     </style>
  15. </head>
  16. <body>
  17.     <div id="nav">
  19.     </div>
  20.     <script>
  22.          /* 当滚动条滚动到距离顶部200px的时候 导航条完全显示 */
  24.         var nav = document.getElementById("nav")
  25.         /* 1、对窗口执行监听事件 */
  26.         window.onscroll = function(){
  27.            /* 2、获取滚动条的高度 */
  28.             var scrollTop = document.documentElement.scrollTop;
  29.             /* 3、得到透明度 */
  30.             var opacity = scrollTop/200;
  31.             if(opacity>1){
  32.                 opacity=1
  33.             }
  34.             nav.style.opacity = opacity;
  35.             console.log(opacity)
  36.         }
  37.     </script>

5秒倒计时

  1.     <button id="btn">发送验证码</button>
  3.     <script>
  4.         var num =5;
  5.         var btn = document.getElementById("btn");
  6.         var timer
  7.         /* 1、让按钮进入倒计时的状态(不能点击的状态)*/
  8.         btn.onclick =  function(){
  9.             this.disabled = true;
  10.             this.innerHTML = num;
  11.             /* 2、每过1s 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.                     num =5;
  20.                     clearInterval(timer);
  21.                 }
  22.             },1000)
  23.         }
  24.     </script>

tab切换

  1.     <style>
  2.         .current {
  3.             color: crimson;
  4.         }
  6.         .parent {
  7.             width: 200px;
  8.             height: 200px;
  9.             border: 1px solid #666;
  10.             position: relative;
  11.         }
  13.         .parent>div {
  14.             width: 200px;
  15.             height: 200px;
  16.             position: absolute;
  17.         }
  19.         .html {
  20.             background: coral;
  21.             z-index: 100;
  22.         }
  24.         .css {
  25.             background: skyblue;
  26.         }
  27.     </style>
  29. </head>
  30. <body>
  31.     <ul>
  32.         <li class="current">html</li>
  33.         <li>css</li>
  34.     </ul>
  35.     <div class="parent">
  36.         <div class="html">html</div>
  37.         <div class="css">css</div>
  38.     </div>
  40.     <script>
  41.         var lis = document.getElementsByTagName("li")
  42.         var divs = document.querySelectorAll(".parent div")
  43.         for (let i = 0; i < lis.length; i++) {
  44.             lis[i].index = i;  // 下标值
  45.             lis[i].onclick = function () {
  46.                 // 1.给所有的li移除class="current"
  47.                 for (let i = 0; i < lis.length; i++) {
  48.                     lis[i].classList.remove("current")
  49.                 }
  50.                 // 2.给当前的 添加current类
  51.                 this.classList.add("current")
  54.                 // 3.让所有的div隐藏
  55.                 for (let i = 0; i < divs.length; i++) {
  56.                     divs[i].style.display = "none"
  57.                 }
  58.                 // 4.让对应下标的div显示
  59.                 divs[this.index].style.display = "block"
  60.             }
  61.             // console.log(lis[i].index);
  62.         }
  63.     </script>
  64. </body>