JS countdown effect

Countdown implementation idea:

The time entered by the user minus the current time is the remaining time, that is, the countdown
You cannot directly subtract hours, minutes, and seconds, because the result will be a negative number, such as 01 minutes minus 15 minutes, and the result is negative 14 minutes
The concept of timestamp needs to be introduced . The total number of milliseconds of the user input time minus the total number of milliseconds of the current time is the number of milliseconds of the remaining time.
Finally, convert the milliseconds of the remaining time into a formatted display of days, hours, minutes, and seconds

static countdown

// 定义变量，用于接收用户输入的截止时间，初始化时默认2020-12-01 18:29:59
var deadline = prompt('请输入截止时间：', '2020-12-01 18:29:59');

// 定义倒计时函数
function countDown() {
    var currentTime = +new Date(); // 当前时间距离1970-01-01 00:00:00的毫秒数
    var futureTime = +new Date(deadline); // 用户输入的截止时间距离1970-01-01 00:00:00的毫秒数
    var times = (futureTime - currentTime) / 1000; // 截止时间减去当前时间还剩下多少秒
    var d = parseInt(times / 60 / 60 / 24); // 将剩余秒数转化成天数，舍弃了不足1天的部分
    d = d < 10 ? '0' + d : d; // 三元表达式，小于10，在数字前面补0，实现两位数展示
    var h = parseInt(times / 60 / 60 % 24); // 将不足1天的部分，转化为小时，舍弃了不足1小时的部分
    h = h < 10 ? '0' + h : h; // 三元表达式，小于10，在数字前面补0，实现两位数展示
    var m = parseInt(times / 60 % 60); // 将不足1小时的部分，转化为分钟，舍弃了不足1分钟的部分
    m = m < 10 ? '0' + m : m; // 三元表达式，小于10，在数字前面补0，实现两位数展示
    var s = parseInt(times % 60); // 将不足1分钟的部分，转化为秒数，舍弃了不足1秒的部分
    s = s < 10 ? '0' + s : s; // 三元表达式，小于10，在数字前面补0，实现两位数展示

	// 页面输出倒计时
    document.write('距离活动结束，还有<br/>' + d + '天' + h + '时' + m + '分' + s + '秒');
}

// 调用倒计时函数
countDown();

Dynamic countdown

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时效果</title>
</head>

<body>
    <!-- 设置一个空div用于接收倒计时 -->
    <div id="showCountDownTime"></div>
    
    <script>
        // 定义变量，用于接收用户输入的截止时间，初始化时默认2020-12-01 18:29:59
        var deadline = prompt('请输入截止时间：', '2020-12-01 18:29:59');
        
        // 定义倒计时函数
        function countDown() {
            var currentTime = +new Date(); // 当前时间距离1970-01-01 00:00:00的毫秒数
            var futureTime = +new Date(deadline); // 用户输入的截止时间距离1970-01-01 00:00:00的毫秒数
            var times = (futureTime - currentTime) / 1000; // 截止时间减去当前时间还剩下多少秒
            var d = parseInt(times / 60 / 60 / 24); // 将剩余秒数转化成天数，舍弃了不足1天的部分
            d = d < 10 ? '0' + d : d; // 三元表达式，小于10，在数字前面补0，实现两位数展示
            var h = parseInt(times / 60 / 60 % 24); // 将不足1天的部分，转化为小时，舍弃了不足1小时的部分
            h = h < 10 ? '0' + h : h; // 三元表达式，小于10，在数字前面补0，实现两位数展示
            var m = parseInt(times / 60 % 60); // 将不足1小时的部分，转化为分钟，舍弃了不足1分钟的部分
            m = m < 10 ? '0' + m : m; // 三元表达式，小于10，在数字前面补0，实现两位数展示
            var s = parseInt(times % 60); // 将不足1分钟的部分，转化为秒数，舍弃了不足1秒的部分
            s = s < 10 ? '0' + s : s; // 三元表达式，小于10，在数字前面补0，实现两位数展示

            // 通过id获取div对象，并赋值给变量oDiv
            var oDiv = document.getElementById('showCountDownTime');
            // 利用HTML对象的innerHTML属性，将倒计时写入div
            oDiv.innerHTML = '距离活动结束，还有<br/>' + d + '天' + h + '时' + m + '分' + s + '秒';
        }
        
        // 设置定时器，每个1秒钟调用倒计时函数
        setInterval(countDown, 1000);
    </script>
</body>
</html>

Guess you like