zoukankan      html  css  js  c++  java
  • 倒计时(五)之页面展现

    style部分

    <style>
            div {
                margin: 200px;
            }
    
            span {
                display: inline-block;
                 40px;
                height: 40px;
                background-color: #333;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
            }
    </style>
    

    body内容

        <div>
            <span class="hour"></span>
            <span class="minute"></span>
            <span class="second"></span>
       </div>
    

    script内容

    <script>
            // 1. 获取元素 
            var hour = document.querySelector('.hour'); // 小时的黑色盒子
            var minute = document.querySelector('.minute'); // 分钟的黑色盒子
            var second = document.querySelector('.second'); // 秒数的黑色盒子
            var inputTime = +new Date('2021-5-21 18:00:00'); // 返回的是用户输入时间总的毫秒数
            countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 
            // 2. 开启定时器
            setInterval(countDown, 1000);
    
            function countDown() {
                var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
                var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
                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>
    

    效果展示

  • 相关阅读:
    BZOJ4237:稻草人
    BZOJ4009:[HNOI2015]接水果(整体二分版)
    BZOJ3745:[COCI2015]Norma
    BZOJ3110:[ZJOI2013]K大数查询(整体二分版)
    BZOJ2716:[Violet 3]天使玩偶
    BZOJ2527:[POI2011]Meteors
    BZOJ4170:极光
    BZOJ1901:Dynamic Rankings
    Python基础终极实战 基于C/S架构的仿优酷项目
    大白话五种IO模型
  • 原文地址:https://www.cnblogs.com/L-hua/p/14793351.html
Copyright © 2011-2022 走看看