案例:倒计时效果和电子时钟

案例:倒计时效果和电子时钟案例:倒计时效果案例分析:①这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)

案例1:倒计时效果

在这里插入图片描述
案例分析:

① 这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)。

② 三个黑色盒子里面分别存放时分秒。

③ 三个黑色盒子利用 innerHTML 放入计算的小时、分钟、秒数。

④ 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白。

⑤ 最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题。

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例:倒计时效果</title>
    <style> div { 
      margin: 200px; } span { 
      display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style>
</head>

<body>
    <div>
        <h3>本场距离结束还剩</h3>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>

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

案例2:电子时钟

需求: 做一个电子时钟,显示当前的年月日,时分秒,要求自动变化。
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例:电子时钟</title>
    <style>
        div { 
   
            margin: 200px;
        }

        span { 
   
            display: inline-block;
            width: 50px;
            height: 30px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div>
        <span class="year">1</span><span class="month">2</span><span class="day">3</span> 日
        星期 <span class="date">4</span>
        <span class="hour">5</span><span class="minute">6</span><span class="second">7</span></div>

    <script>
        var year = document.querySelector('.year');
        var month = document.querySelector('.month');
        var day = document.querySelector('.day');
        var dates = document.querySelector('.date');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        setInterval(getTimes, 1000);

        var days = ['日', '一', '二', '三', '四', '五', '六'];
        function getTimes() { 
   
            var date = new Date();
            var y = date.getFullYear();
            year.innerHTML = y;
            var mo = date.getMonth();
            month.innerHTML = mo + 1;  // 月份从0开始,所以要加1
            var da = date.getDate();  // 日
            day.innerHTML = da;
            var dt = date.getDay();  // 星期
            // console.log(days[dt]);
            dates.innerHTML = days[dt];
            var h = date.getHours();
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = date.getMinutes();
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = date.getSeconds();
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
        getTimes();
    </script>
</body>

</html>

今天的文章案例:倒计时效果和电子时钟分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/64930.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注