场景题:实现抢购倒计时

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

方法:用时间戳。

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

  • 把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)

转换公式:

  • 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)
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值