淘先锋技术网

首页 1 2 3 4 5 6 7

JS 倒计时效果

倒计时实现思路：

  1. 用户输入的时间减去当前的时间就是剩余的时间，即倒计时
  2. 不能用时分秒直接相减，因为出来的结果会是负数，比如01分减去15分，结果是负14分
  3. 需要引入时间戳的概念，用户输入时间的总毫秒数减去当前时间的总毫秒数，得到的就是剩余时间的毫秒数
  4. 最后把剩余时间的毫秒数转化成天、时、分、秒的格式化展示

 静态倒计时

// 定义变量，用于接收用户输入的截止时间，初始化时默认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();

动态倒计时

<!DOCTYPE html>
<html >

<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>