js小案例

lqh198722
513 阅读4分钟

一、JS实现排他切换

Snipaste_2022-03-27_10-50-41.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   
</style>
<body>

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>

<script>
    let btn = document.getElementsByTagName('button');
    for (let i=0;i<btn.length;i++) {
        btn[i].onclick = function () {
            for (let j=0;j<btn.length;j++) {
                btn[j].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'pink';
        }
    }
</script>
</body>
</html>

二、JS实现百度换肤

Snipaste_2022-03-27_10-49-47.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   .box {
       padding: 10px;
       background-color: #333333;
       height: 80px;

       margin: 20px auto;
       list-style: none;
       text-align: center;
       width: 450px;
   }
   ul li {
       float:left;
       margin-left: 10px;
       width: 100px;
       height: 80px;
       cursor: pointer;
   }

   ul li img{
       width: 100px;
       height: 80px;
   }
   body {
       background: url("img/1.jpg") no-repeat top center;
   }
</style>
<body>
<ul class="box">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
</ul>

<script>
window.onload = function () {
    let box = document.querySelector('.box');
    let img = box.querySelectorAll('img');
    console.log(img.length);
    for (let i=0;i<img.length;i++) {
        img[i].onmouseover = function () {
            document.body.style.backgroundImage =  'url(' + this.src + ')';
        }
    }
}

</script>
</body>
</html>

三、js实现table 隔行换色

Snipaste_2022-03-27_10-47-01.png

css scss部分
table {
    width:600px;
    text-align: center;
    border-collapse: collapse;
    margin: 20px auto;
    thead {
        tr{
            height: 40px;
            text-align: center;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
    }
    tbody {
        tr{
            height: 40px;
            text-align: center;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            cursor:pointer;
        }
    }
}
.pink {
    background: pink;
}
html 部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/1.css">
</head>
<style>

</style>
<body>
<table>
    <thead>
    <tr>
        <td>公司</td>
        <td>价格</td>
        <td>地点</td>
        <td>体重</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    <tr>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    <tr>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    <tr>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    </tbody>
</table>

</body>
</html>
js部分
<script>
window.onload = function () {
    let tbody = document.querySelector('tbody');
    let tr = tbody.querySelectorAll('tr');
    for(let i=0;i<tr.length;i++) {
        tr[i].onmouseover = function () {
            this.className = 'pink';
        }
        tr[i].onmouseout = function () {
            this.className = '';
        }
    }
}

</script>

四、复选框的选中与取消

Snipaste_2022-03-27_14-32-26.png

html 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/2.css">
</head>
<style>

</style>
<body>
<table>
    <thead>
    <tr>
        <td><input type="checkbox"></td>
        <td>公司</td>
        <td>价格</td>
        <td>地点</td>
        <td>体重</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>北京科技有限公司</td>
        <td>32.3</td>
        <td>海淀区盈科大厦</td>
        <td>43kg</td>
    </tr>
    </tbody>
</table>
</body>
</html>
css 里的 scss
table {
    width:600px;
    text-align: center;
    border-collapse: collapse;
    margin: 20px auto;
    thead {
        tr,td{
            height: 40px;
            text-align: center;
            border: 1px solid #ccc;
            input {

            }

        }

    }
    tbody {
        tr,td{
            height: 40px;
            text-align: center;
            border: 1px solid #ccc;
            cursor:pointer;
        }
    }
}
js 代码
window.onload = function () {
    let thead = document.querySelector('thead');
    let thead_tr_input = thead.querySelector('input');

    let tbody = document.querySelector('tbody');
    let tbody_tr_input = tbody.querySelectorAll('input');

    //给全选框绑定点击事件
    thead_tr_input.onclick = function () {
        for(let i=0;i<tbody_tr_input.length;i++) {
            //把当前点击复选框的checked赋值给复选框。使其为选中状态
            tbody_tr_input[i].checked = this.checked;
        }
    }
    for(let i=0;i<tbody_tr_input.length;i++) {
        //给每个复选框绑定单击事件
        tbody_tr_input[i].onclick = function () {
            //标志位，用来判断复选框是否全被选中
            var flag = true;
            //当选中一个复选框时，循环每一个复选框
            for (let j=0;j<tbody_tr_input.length;j++) {
                //如果没有全被选中复选框
                if (!tbody_tr_input[j].checked) {
                    flag = false;
                }
                thead_tr_input.checked = flag;
            }
        }
    }

}

五、选项卡的切换

Snipaste_2022-03-27_21-03-39.png

html 内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/9.css">
</head>
<style>
</style>
<body>
<div class="outbox">
    <div class="li-list">
        <ul>
            <li class="active">选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
            <li>选项卡4</li>
        </ul>
    </div>
    <div class="tabs">
        <div class="item current">选项卡内容1</div>
        <div class="item">选项卡内容2</div>
        <div class="item">选项卡内容3</div>
        <div class="item">选项卡内容4</div>
    </div>
</div>

</body>
</html>
css 里的scss
* {
  padding:0;
  margin:0;

}
.outbox {
  width: 804px;
  margin: 20px auto;
  .li-list  {
     ul {
       list-style: none;
       height: 40px;
       background-color: green;
       li{
         float: left;
         height: 40px;
         width: 200px;
         text-align: center;
          line-height: 40px;
         color:#fff;
         background: #333333;
         margin-left: 1px;
         cursor: pointer;

       }
       .active {
         background: darkred;
       }
     }
  }
  .tabs {
    background-color: #ccc;
    .item {
      height: 400px;
      padding:20px;
      display: none;
      background: darkred;
    }
    .current {
      display: block;

    }
  }
}
css部分
* {
  padding: 0;
  margin: 0;
}

.outbox {
  width: 804px;
  margin: 20px auto;
}
.outbox .li-list ul {
  list-style: none;
  height: 40px;
  background-color: green;
}
.outbox .li-list ul li {
  float: left;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  background: #333333;
  margin-left: 1px;
  cursor: pointer;
}
.outbox .li-list ul .active {
  background: darkred;
}
.outbox .tabs {
  background-color: #ccc;
}
.outbox .tabs .item {
  height: 400px;
  padding: 20px;
  display: none;
  background: darkred;
}
.outbox .tabs .current {
  display: block;
}

/*# sourceMappingURL=9.css.map */
javascript 部分
window.onload = function () {
    //选项卡父元素
    let outbox = document.querySelector('.outbox');
    ////选项卡切换元素
    let li_list = outbox.querySelector('.li-list');
    let li = outbox.querySelectorAll('li');
    //选项卡切换显示子元素
    let tabs = outbox.querySelector('.tabs');
    let item = outbox.querySelectorAll('.item');

    //循环要点击切换的每个按钮
    for (let i=0; i<li.length; i++) {
        //给每个要点击切换的按钮绑定点击事件
        li[i].onclick = function () {
            //给每个要点击切换的按钮添加一个自定义属性，用于记录要切换的内容
            this.setAttribute('data-index',i);
            //去掉按钮的active属性，全部清空
            for(let j=0; j<li.length; j++) {
                li[j].className = '';
            }
            //给每个按钮重新赋值active属性
            this.className = 'active';

            //清空tabs内容，全部清空
            for(let k=0;k<item.length;k++) {
                item[k].className = 'item';
            }
            //获取刚刚定义的自定义属性
            let a=this.getAttribute('data-index');
            //重新赋值tabs选项卡的类属性
            item[a].className = 'item current';

        }
    }

}

六、节点操作

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>携程旅行，说走就走得旅行</title>
<ul>
</ul>
<script>
    //创建文本节点
   let text = document.createTextNode('ddddd');
   //创建元素节点
   let ele = document.createElement('li');
   let ul = document.querySelector('ul');
   //把节点追加到元素内
   ele.appendChild(text);
   ul.appendChild(ele);
</script>
</body>
</html>

七、js实现简单的留言版

Snipaste_2022-03-29_20-24-51.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/11.css">
</head>
<body>
<textarea cols="30" id="dd" rows="10"></textarea>
<button>发布</button>
<ul></ul>

<script>
window.onload = function () {
    //选择texarea里的内容
    let text_box = document.querySelector('textarea');
    //选择ul元素
    let ul = document.querySelector('ul');
    //选择button按钮
    let btn = document.querySelector('button');
   btn.onclick = function () {
       //创建li元素
       let li = document.createElement('li');
       //把输入的内容放入li里面
      li.innerHTML = text_box.value;
      ul.appendChild(li);
       //清空textarea里的内容
       text_box.value = '';
    }
}
</script>
</body>
</html>

八、 js实现下拉按钮

Snipaste_2022-03-29_20-28-12.png

html 部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/11.css">
</head>
<body>
<div class="container">
    <div class="con-box">
      <div class="wrap">
          <div class="logo"><img src="img/logo.png" alt=""></div>
      </div>
    </div>
    <div class="ul-list">
        <div class="wrap">
            <ul>
                <li><a href="index.jsp">学院首页</a></li>
                <li>
                    <a rel="NavigSimple_2" href="xyjs.jsp">学院概况</a>
                    <div class="dropmenudiv">
                        <a href="list.jsp?itemId=9&amp;cItemId=142">党群部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=143">行政部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=144">教学系部</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=145">教辅部门</a>
                    </div>
                </li>
                <li><a rel="NavigSimple_960" href="list.jsp?itemId=1164&cItemId=1165" target="_blank">专业建设</a></li>
                <li><a rel="NavigSimple_9" href="list.jsp?itemId=9&cItemId=142">机构设置</a></li>
                <li>
                    <a rel="NavigSimple_958" href="http://zsjyb.gzeic.edu.cn/" target="_blank">招生就业</a>
                    <div class="dropmenudiv">
                        <a href="list.jsp?itemId=9&amp;cItemId=142">党群部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=143">行政部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=144">教学系部</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=145">教辅部门</a>
                    </div>
                </li>

                <li><a rel="NavigSimple_22">党建思政</a></li>
                <li>
                    <a rel="NavigSimple_6" href="xxfw.jsp">学校服务</a>
                    <div class="dropmenudiv">
                        <a href="list.jsp?itemId=9&amp;cItemId=142">党群部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=143">行政部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=144">教学系部</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=145">教辅部门</a>
                    </div>
                </li>
                <li><a rel="NavigSimple_7" href="list.jsp?itemId=7">教学科研</a></li>
                <li><a rel="NavigSimple_10" href="xxgk.jsp">信息公开</a></li>
                <li><a rel="NavigSimple_11" href="hdjl.jsp">互动交流</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>
css 里的 scss部分
* {
  padding:0;
  margin:0;
}

.wrap {
  width:1080px;
  margin: 0 auto;
}

.container {

  .con-box {
    background: #0c5ea7;
    height: 121px;
    .logo {
      width: 984px;
      height: 121px;
      margin: 0 auto;

      img {
        width: 100%;

      }
    }
  }
    .ul-list{
      background: #105692;
      height: 45px;
      ul {
        list-style: none;
        background: #105692;
        li{
          width: 108px;
          height: 45px;
          text-align: center;
          line-height: 45px;
           position: relative;
          float: left;
          > a {
            color:#fff;
            text-decoration: none;
            font-size: 16px;
            display: block;
          }

          .dropmenudiv {
            position: absolute;
            top:45px;
            left: 0;
            background: whitesmoke;
            display: none;
            > a {
              width: 110px;
              height: 30px;
              text-decoration: none;
              color: black;
              display: block;
              border: 1px solid #ccc;
              border-top: 1px solid transparent;
              font-size: 12px;
              text-align: left;
              padding:0 0 0 15px;
              line-height: 30px;
              background: url("../img/bit.gif") no-repeat 4px center;
            }
          }
          .dpcs1 {
            display: block;
          }
        }
      }
    }

  }
css部分
* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 1080px;
  margin: 0 auto;
}

.container .con-box {
  background: #0c5ea7;
  height: 121px;
}
.container .con-box .logo {
  width: 984px;
  height: 121px;
  margin: 0 auto;
}
.container .con-box .logo img {
  width: 100%;
}
.container .ul-list {
  background: #105692;
  height: 45px;
}
.container .ul-list ul {
  list-style: none;
  background: #105692;
}
.container .ul-list ul li {
  width: 108px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  position: relative;
  float: left;
}
.container .ul-list ul li > a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  display: block;
}
.container .ul-list ul li .dropmenudiv {
  position: absolute;
  top: 45px;
  left: 0;
  background: whitesmoke;
  display: none;
}
.container .ul-list ul li .dropmenudiv > a {
  width: 110px;
  height: 30px;
  text-decoration: none;
  color: black;
  display: block;
  border: 1px solid #ccc;
  border-top: 1px solid transparent;
  font-size: 12px;
  text-align: left;
  padding: 0 0 0 15px;
  line-height: 30px;
  background: url("../img/bit.gif") no-repeat 4px center;
}
.container .ul-list ul li .dpcs1 {
  display: block;
}

/*# sourceMappingURL=11.css.map */
js部分
<script>
window.onload = function () {
   let ul_list = document.querySelectorAll('.dropmenudiv');
    for(let i=0;i<ul_list.length;i++) {
        ul_list[i].parentNode.onmousemove = function () {
            this.lastElementChild.className = 'dropmenudiv dpcs1';
        }
        ul_list[i].parentNode.onmouseout = function () {
            this.lastElementChild.className = 'dropmenudiv';
        }
    }
}

</script>

九、在第八小案例的基础上添加删除操作

<script>
window.onload = function () {
    //选择texarea里的内容
    let text_box = document.querySelector('textarea');
    //选择ul元素
    let ul = document.querySelector('ul');
    //选择button按钮
    let btn = document.querySelector('button');
   btn.onclick = function () {
       if(text_box.value !== ''){
           //创建li元素
           let li = document.createElement('li');
           //把输入的内容放入li里面
           li.innerHTML = "<a href='javascript:;'>删除</a>" + text_box.value ;
           //把li元素追加到ul里面
           //ul.appendChild(li);
           //清空textarea里的内容
           //在父元素里面的前面添加节点
           ul.insertBefore(li,ul.children[0]);
           text_box.value = '';

           //删除操作 给每个删除文字绑定点击事件
           let a = document.querySelectorAll('a');
           for(let i=0; i<a.length; i++) {
               a[i].onclick = function () {
                   //this.parentNode 表示a里删除链接的父元素li;
                   ul.removeChild(this.parentNode);
               }

           }
       } else {
           alert('请输入内容');
       }
    }

十、js实现表格获取数据删除数据

Snipaste_2022-03-30_21-03-37.png

js 和 html部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/14.css">
</head>
<style>

</style>
<body>
<table>
    <thead>
    <tr>
        <td>公司</td>
        <td>价格</td>
        <td>地点</td>
        <td>体重</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
window.onload = function () {
    let obj = [
        {
          company: '小米',
          price: 32.21,
          address: '海淀区英科大厦',
          weight: '100kg'
        },{
            company: '华为',
            price: 32.21,
            address: '朝阳区英科大厦',
            weight: '32kg'
        },{
            company: '小米',
            price: 54.21,
            address: '西城区英科大厦',
            weight: '67kg'
        }
    ];
//获取tbody
let tbody = document.querySelector('tbody');
//创建tr 并把tr追加到tbody里
for (let i=0;i<obj.length;i++) {
    let tr = document.createElement('tr');
    tbody.appendChild(tr);

    // {
    //     company: '小米',
    //     price: 54.21,
    //     address: '西城区英科大厦',
    //     weight: '67kg'
    // }
    //  循环以上对象结构 并追加到td,tr里
    for(let j in obj[i]) {
        let td = document.createElement('td');
        td.innerHTML = obj[i][j];
        tr.appendChild(td);
    }

    //创建删除 a 链接，并追加到td,tr里
    let td = document.createElement('td');
    td.innerHTML = "<a href='javascript:;'>删除</a>"
    tr.appendChild(td);

    let a = document.querySelectorAll('a');

    //点击 a里的删除 链接  删除所在行的表格
    for (let k = 0;k<a.length;k++){
        a[k].addEventListener('click',function () {
            //tbody父节点，[this.parentNode.parentNode]tr节点
            tbody.removeChild(this.parentNode.parentNode);
        })
    }
}
}
</script>
</body>
</html>
css 部分
table {
  width: 600px;
  text-align: center;
  border-collapse: collapse;
  margin: 20px auto;
}
table thead tr, table thead td {
  height: 40px;
  text-align: center;
  border: 1px solid #ccc;
}
table tbody tr, table tbody td {
  height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
}

.pink {
  background: pink;
}

/*# sourceMappingURL=14.css.map */

十一、 当按下键盘上的s 键时，input 自动获取焦点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/15.css">

    <style>

    </style>
</head>
<body>
<input type="text">
<script>
window.onload = function () {
 /* document.addEventListener('keyup',function (e){
      console.log(e);
  })*/
  /*  document.addEventListener('keypress',function (e){
      console.log(e.keyCode);
  })*/
    let input = document.querySelector('input');
     document.addEventListener('keyup',function (e){
       if (e.keyCode ===  83) {
           input.focus();
       }
   })
    
}
</script>
</body>
</html>

十二、给京东快递单号 实现放大效果

Snipaste_2022-04-04_23-15-33.png

给input 键盘添加弹起事件 keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/15.css">

    <style>
        .com {
            position: relative;
            font-size: 20px;
            line-height: 30px;
            border: 1px solid #ccc;
            width: 200px;
            height: 30px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,.2);
            visibility:hidden;

        }
        .com::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 30px;
            left: 30px;
            border: 8px solid #e3e2e2;
            border-color: #e7e5e5 transparent transparent;

        }
        .com::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            z-index: 9999;
            top: 28px;
            left: 30px;
            border: 8px solid #fff;
            border-color: #fff transparent transparent;

        }


        input {
            width: 200px;
            height: 20px;
            background-color: #fff;
            outline: none;
            border: 1px solid #a8a5a5;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .search {
            width: 300px;
            margin: 200px auto;
        }
    </style>
</head>
<body>

<div class="search">
    <div class="com"></div>
    <input type="text" placeholder="请输入快递单号">
</div>


<script>
window.onload = function () {
    //给input 键盘添加弹起事件 keyup
    let com = document.querySelector('.com');
    let input = document.querySelector('input');
    input.addEventListener('keyup',function (e) {
        if (this.value === '') {
            com.style.visibility = 'hidden';
        } else {
            com.style.visibility = 'visible';
            com.innerText = this.value;
        }
    })


}
</script>


</body>
</html>

十四、京东秒杀倒计时 时分秒

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/15.css">

    <style>
       .jd {
           background: url("./img/jdms.png") no-repeat left;
           width: 190px;
           height: 260px;
           background-size: 100%;
           text-align: center;
           color:#fff;
       }
       .countdown-title {
           font-size: 30px;
           font-weight: 700;
          padding-top: 31px;

       }
.countdown-desc {
    padding-top: 90px;
    font-size: 14px;

}
       .timmer {
           position: relative;
           width: 150px;
            margin-left: 14px;
            margin-top: 10px;
           text-align: center;
           background: green;
           display: block;

       }
.timmer .timmer__unit {
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: #2f3430;
    margin-left: 18px;
    color: white;
    font-size: 20px;
}
.timmer__unit--second {

}
    </style>
</head>
<body>

<div class="jd">
    <div class="countdown-title">京东秒杀</div>
    <div>
        <div class="countdown-desc">
            <strong>16:00</strong>点场 距结束
        </div>
        <span class="timmer countdown-main">
            <span class="timmer__unit timmer_unit_hour">00</span>
            <span class="timmer__unit timmer_unit_minute">00</span>
            <span class="timmer__unit timmer_unit_second">00</span>
        </span>
    </div>

</div>


<script>
window.onload = function () {

    // 1.获取元素
    var hour = document.querySelector('.timmer_unit_hour');          //小时的盒子
    var minute = document.querySelector('.timmer_unit_minute');     //分钟的盒子
    var second = document.querySelector('.timmer_unit_second');     //秒数
    var inputTime = +new Date('2022/04/09 19:00:00');   //返回的是用户输入时间总的毫秒数
    console.log(inputTime);
    countDown();  //我们先调用一次这个函数，防止第一次刷新页面有空白
    // 2.开启定时器
    setInterval(countDown,1000);
    function countDown() {
        var nowTime = +new Date();   //返回的是当前时间总的总的毫秒数
        var times = (inputTime - nowTime) / 1000;  //times是剩余的总的秒数
        //var d = parseInt(times / 60 / 60 / 24);    //天
        var h = parseInt(times / 60 / 60 % 24);    //时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;   //把剩余的小时 给小时的盒子
        var m = parseInt(times / 60 % 60);  //分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);   //当前的秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }
}

</script>


</body>
</html>

十五、发送短信倒计时效果

image.png

<!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>
</head>
<body>
    <input type="text">
    <button>发送</button>

    <script>

        window.onload = function() {
            let btn  =  document.querySelector('button');
            var time = 60;
            btn.disabled = false;
            btn.addEventListener('click',function() {
                var hh = setInterval(function() {
                    if(time == 0) {
                        btn.disabled = false;
                        btn.innerHTML = '发送'
                        time = 60;
                        //清除计时器
                        window.clearInterval(hh);
                    } else {
                        btn.innerHTML = '倒计时' + time + '秒';
                        btn.disabled = true;
                        time--;

                    }

                },1000);

            });

        }

    </script>

</body>

</html>

十六、5秒钟自动调转到首页

image.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/15.css">
    <style>
    </style>
</head>
<body>
<button>5秒钟自动调转到首页</button>

<script>
window.onload = function () {
  let btn = document.querySelector('button');
  btn.addEventListener('click',function () {
      location.href = 'https://www.baidu.com';
  });
  fn();

  setInterval(fn,1000);
  var time = 5;
  function fn() {

      if (time === 0) {
          location.href = 'https://www.baidu.com';
      } else {
          btn.innerHTML = time? time +'秒钟自动跳到首页': '5秒钟自动跳到首页';
          time--;
      }
  }
}

</script>
</body>
</html>
avatar
文章
阅读
粉丝