场景题：实现抢购倒计时

创客皮卡丘

已于 2024-05-21 21:21:13 修改

阅读量165

点赞数 2

分类专栏：我的前端学习路线文章标签： javascript 前端 css html

于 2024-05-21 21:20:56 首次发布

本文链接：https://blog.csdn.net/m0_49882786/article/details/139102596

版权

我的前端学习路线专栏收录该内容

6 篇文章 0 订阅

订阅专栏

核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时。但是不能拿着时分秒相减，结果会是负数。

方法：用时间戳。

用户输入时间总的毫秒数减去现在时间总的毫秒数，得到剩余时间的毫秒数。

把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）

转换公式：

d = parseInt(总秒数/60/60/24) // 计算天数
h = parseInt(总秒数/60/60%24) // 计算小时
m = parseInt(总秒数/60%60) // 计算分钟
s = parseInt(总秒数%60) // 计算当前秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抢购倒计时</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="context">
        <h3>抢购倒计时</h3>
        <div class="main">
            <div class="card">
                <span id="hour">00</span>
                <div></div>
            </div>
            <div class="card">
                <span id="minute">00</span>
                <div></div>
            </div>
            <div class="card">
                <span id="sec">00</span>
                <div></div>
            </div>
        </div>
        <span class="end" id="stop">倒计时结束！</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

*{
    margin: 0px;
    padding: 0px;
    box-sizing: content-box;
}
.context{
    width: 20vw;
    height: 40vh;
    background-color: red;
    margin: 20px auto;
    display: flex;
    flex-direction: column;

    align-items: center;
}
.context h3{
    color: #fff;
    font-size: 25px;
    padding-top: 20px;
    text-align: center;
}
.main{
    width: 15vw;
    height: 7vh;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}
.card{
    width: 40px;
    height: 100%;
    background-color: #fff;
    line-height: 7vh;
    text-align: center;
    font-size: 20px;
    position: relative;
}
.card div{
    position: absolute;
    top:3.5vh;
    width: 100%;
    border-bottom: 1px solid;
}
.end{
    display: none;
    color: #edea05;
    font-size: 15px;
}

function countDown(time) {
    var date = []
    var nowTime = +new Date();// 返回当前时间的总毫秒数
    var inputTime = +new Date(time);//返回输入时间的总毫秒数
    var times = (inputTime - nowTime) / 1000;//剩余时间的秒数
    var d = parseInt(times / 60 / 60 / 24) // 计算天数
    d = d > 9 ? d : '0' + d
    var h = parseInt(times / 60 / 60 % 24) // 计算小时
    h = h > 9 ? h : '0' + h
    var m = parseInt(times / 60 % 60) // 计算分钟
    m = m > 9 ? m : '0' + m
    var s = parseInt(times % 60) // 计算当前秒
    s = s > 9 ? s : '0' + s
    date.push(d, h, m, s)
    return date
}
var nowTime = new Date()
// 计时多久
var addHour = nowTime.setSeconds(nowTime.getSeconds() +60)
var time = new Date(addHour)
// 字符串格式日期
function DateToStr(time) {
    var year = time.getFullYear();//年
    var month = time.getMonth();//月
    var day = time.getDate();//日
    var h = time.getHours();
    var m = time.getMinutes();
    var s = time.getSeconds();
    return year + '-' + ((month + 1) > 9 ? (month + 1) : '0' + (month + 1)) + '-' + (day > 9 ? day : '0' + day) + ' ' + (h <= 9 ? '0' + h : h) + ':' + (m <= 9 ? '0' + m : m) + ':' + (s <= 9 ? '0' + s : s)
}
var strTime = DateToStr(time)
var dateList = []
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var sec = document.getElementById('sec');
var stops = document.getElementById('stop')
console.log(stops);
var tiemInt
tiemInt = setInterval(() => {
    dateList = countDown(strTime)
    hour.innerText = dateList[1]
    minute.innerText = dateList[2]
    sec.innerText = dateList[3]
    if(dateList[0] == 0 && dateList[1] == 0 && dateList[2] == 0 && dateList[3] == 0){
        clearInterval(tiemInt)
        stops.style.display = 'block'
    }
}, 1000)