倒计时案例

最新推荐文章于 2024-07-13 09:19:02 发布

灰色棉裤

最新推荐文章于 2024-07-13 09:19:02 发布

阅读量93

点赞数 4

文章标签： html5 html css javascript

本文链接：https://blog.csdn.net/qq_58547367/article/details/120023548

版权

一、html代码

<!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>倒计时</title>
    <style>
    .div {
        width: 190px;
        height: 260px;
        background: url('../bg.png');
        margin: 100px auto;       
    }
    a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 28px;
    }
    .text {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    .box {
        width: 100%;
        margin-top: 120px;
        text-align: center;
    }
    .box span {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #2f3430;
        font-size: 18px;
        text-align: center;
        line-height: 30px;
        position: relative;
    }
    .hour:after {
        content: ':';
        position: absolute;
        right: -6px;
        top: 0;
    }
    .minute:after {
        content: ':';
        position: absolute;
        right: -6px;
        top: 0;
    }
    </style>
    
</head>
<body>
    <a href="#">
        <div class="div">
            <span class="text">倒计时</span>
            <div class="box">
                <span class="hour">1</span>
                <span class="minute">2</span>
                <span class="second">3</span>
            </div>
        </div>
    </a>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

二、js代码

// 获取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// 开启定时器
setInterval(timer,1000);
function timer() {
    // 获取当前系统时间
    var timeNow = new Date();
    // 手动设置的时间
    var newTime = new Date('2021-09-01 00:00:00');
    // 剩余时间的时间戳转换为秒
    var times = (newTime - timeNow) / 1000; 
    // 赋值给span
    var hours  = parseInt(times / 60 / 60 % 24); // 时
    var minutes = parseInt(times / 60 % 60); // 分
    var seconds = parseInt(times % 60); // 秒
    hours = hours < 10 ? '0'+ hours:hours;  // 如果单位数前面就补0
    minutes = minutes < 10 ? '0' + minutes:minutes;
    seconds = seconds < 10 ? '0'+seconds:seconds;
    // 赋值给元素
    hour.innerHTML = hours;
    minute.innerHTML = minutes;
    second.innerHTML = seconds;
}
timer(); // 调用函数

灰色棉裤

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时案例

一、html代码<!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"> <t
复制链接

扫一扫