倒计时案例

核心思路

核心思路：输入的时间减去现在的时间就是剩余的时间，即倒计时，不能直接来减，需要利用时间戳得到两个时间差的总毫秒数，然后把总毫秒数转化为天、时、分、秒

生日倒计时

比如现在来做一个生日倒计时

首先得到现在的时间

var now = new Date();

然后获取今年生日日期对象生日09月04号

var year = now.getFullYear();
var future = new Date(year,08,04)

注意月份要输入08，因为js中getMonth()这个方法获取的其实是索引值。他的值是从0开始的。所以要加1才会得到真正的月份。

然后获取总毫秒数，两个一减，获取总毫秒数有三种方法

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf()) 
console.log(date.getTime()) 
// 2. 简单写可以这么做
var now = +new Date();          
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

具体实现

先画一个简单界面

<div class="timer">
    <h1>倒计时案例</h1>
    <p>距离今年生日还有：</p>
    <span class="day">天</span>
    <div class="sfm">
        <span class="hour">时</span>
        <span class="minute">分</span>
        <span class="second">秒</span>
    </div>
</div>

/*清除默认样式*/
* {
    margin: 0;
    padding: 0;
}

body,
html {
    background: url(image/1.png) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 900px;
    height: 350px;
    background: rgba(255, 255, 255, .6);
    margin: 200px auto 0;
    border-radius: 25px;
}

/* 移动端适配 */
@media screen and (max-width:768px) {
    .timer {
        width: 350px;
        height: 350px;
    }
}

.timer h1 {
    margin-top: 50px;
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: blue
}

.timer p {
    width: 300px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
}

.timer .day {
    margin-top: 20px;
    font-size: 30px;
    font-weight: 700;
}

.sfm {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: 25px;
}

.sfm span {
    margin: 8px;
}

获取相应元素以后，用一个定时器实现动态效果

//输入的时间减去现在的时间就是剩余的时间，即倒计时，不能直接来减，需要利用时间戳得到两个时间差的总毫秒数，然后把总毫秒数转化为天、时、分、秒
//获取元素
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var sfm = document.querySelector('.sfm');      
setInterval(function () {
    //现在的时间戳
    var now = +new Date();
    //得到现在的年份
    var year = new Date().getFullYear();
    //得到生日时候的时间戳
    var future = +new Date(year, 08, 04);
    var diffDay, diffHour, diffMinute, diffSecond;
    var diffTime = future - now;
    //如果过了生日显示生日已经结束，天数归0
    if (diffTime < 0) {
        day.innerHTML = 0 + '天';
        sfm.innerHTML = '今年生日已经结束了';
    } else {
        //时间戳转换成时分秒
        diffSecond = Math.floor(diffTime / 1000 % 60);
        diffSecond = diffSecond < 10 ? '0' + diffSecond : diffSecond;
        second.innerHTML = diffSecond + '秒';
        diffMinute = Math.floor(diffTime / 1000 / 60 % 60);
        diffMinute = diffMinute < 10 ? '0' + diffMinute : diffMinute;
        minute.innerHTML = diffMinute + '分';
        diffHour = Math.floor(diffTime / 1000 / 60 / 60 % 24);
        diffHour = diffHour < 10 ? '0' + diffHour : diffHour;
        hour.innerHTML = diffHour + '时';
        diffDay = Math.floor(diffTime / 1000 / 60 / 60 / 24);
        diffDay = diffDay < 10 ? '0' + diffDay : diffDay;
        day.innerHTML = diffDay + '天';
    }
}, 1000);

项目展示

生日倒计时