前端倒计时效果

最新推荐文章于 2023-05-16 23:37:43 发布

L在前方

最新推荐文章于 2023-05-16 23:37:43 发布

阅读量288

点赞数

分类专栏：前端（Html+CSS+JavaScript）文章标签： javascript

本文链接：https://blog.csdn.net/qq_45828598/article/details/113727446

版权

前端（Html+CSS+JavaScript）专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            padding: 10px;
            font-size: 100px;
        }
        
        p {
            float: left;
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            color: #ffffff;
            background-color: #333333;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>

<body>
    <div>
        <p class="hour">1</p>
        <p class="minute">2</p>
        <p class="second">3</p>
    </div>
    <script>
        window.addEventListener('load', function() {
            //获取元素
            var hour = document.querySelector('.hour'); //小时的黑盒子
            var minute = document.querySelector('.minute'); //分钟的黑色盒子
            var second = document.querySelector('.second'); //秒数的黑色盒子
            var inputTime = +new Date('2021-2-6 18:00:00'); //返回的是用户输入时间总的毫秒数
            countDown(); //先调用一次这个函数，防止第一次刷新页面有空白
            //开启定时器
            setInterval(countDown, 1000);

            function countDown() {
                var nowTime = +new Date(); //返回的是当前时间总的毫秒数
                var times = (inputTime - nowTime) / 1000; //tiems是剩余时间总的毫秒数
                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>

L在前方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端倒计时效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { padding: 10px; font-size: 100px; } p { .
复制链接

扫一扫

专栏目录