原生JS实现倒计时效果

最新推荐文章于 2024-07-08 16:22:29 发布

西红柿炒番茄@ZXR

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量164

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_46005715/article/details/115636720

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        #showtime {
            font-size: 45px;
            color: #f00;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="showtime"></div>
<script>
    let res = setInterval(myfunction, 1000); //反复执行函数本身
    function myfunction() {
        document.getElementById("showtime").innerHTML = showtime();
    }
    let showtime = function() {
        let nowtime = new Date(), //获取当前时间
            endtime = new Date("2019-04-12 21:30:00"); //定义结束时间
        let lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
            // leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
            lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24)), //计算小时数
            leftm = Math.floor((lefttime / (1000 * 60) % 60)), //计算分钟数
            lefts = Math.floor((lefttime / 1000 % 60)); //计算秒数
        console.log(lefttime);
        lefth = formatdate(lefth)
        leftm = formatdate(leftm)
        lefts = formatdate(lefts)
        if (lefth == '00' && leftm == '00' && lefts == '00' || lefttime < 0) {
            clearInterval(res)
            console.log('123触发了');
            lefth = '00';
            leftm = '00';
            lefts = '00';
        }
        return lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串

    }


    // 数码时钟（见图）

    function formatmon(mon) {
        if (mon < 9) {
            var monstr = String(mon + 1);
            monstr = "0" + monstr
        } else {
            var monstr = String(mon);
        }
        return monstr; //返回一个格式化后的值
    }

    function formatdate(date) {
        if (date < 10) {
            var datestr = String(date);
            datestr = "0" + datestr
        } else {
            var datestr = String(date);
        }
        return datestr; //返回一个格式化后的值
    }
    let pic = '' //全局0-变量
    setInterval(function() {
        let NowDate = new Date();
        let year = NowDate.getFullYear(); //获取年份
        let mon = NowDate.getMonth(); //获取月份  月份是从0开始计算的  数字类型
        let date = NowDate.getDate(); //获取时间
        let hour = NowDate.getHours();
        let minute = NowDate.getMinutes();
        let second = NowDate.getSeconds();
        //数字转为字符串
        let monstr = formatmon(mon)
        let datestr = formatdate(date)
        let yearstr = formatdate(year)
        let hourstr = formatdate(hour)
        let minutestr = formatdate(minute)
        let secondstr = formatdate(second)


    }, 1000);
</script>
</body>
</html>

西红柿炒番茄@ZXR

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现倒计时效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时</title> <style> #showtime { font-size: 45px; color: #f00; text-align: center; }
复制链接

扫一扫