js促销倒数计时器

最新推荐文章于 2024-05-22 01:53:01 发布

小巷下起了雨

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量1k

点赞数

分类专栏： front-end(js)

本文链接：https://blog.csdn.net/qq_28057577/article/details/75101111

版权

front-end(js) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.效果图

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒数计时器</title>
    <script src="statics/js/jquery-1.8.3.min.js"></script>
</head>

<style type="text/css">
   .timer{
       font-size: larger;
       color:#C71585;

   }

    .andy{
        margin: 10px auto;
        background-color: whitesmoke;
        height: 88px;
        line-height: 88px;
        text-align: center;
        width: 240px;
        padding-top: 10px;
        border: dotted 3px gainsboro;
        border-radius: 5px;
        box-shadow: 5px 5px 5px #888888;
    }
    .day{color: #6A5ACD}

</style>
<body>

    <div id="andy timer" class="andy timer">

    </div>

</body>
</html>

<script type="text/javascript">



    var interval=1000;

    function ShowTimer(endYear,endMonth,endDay,divId) {
        var now=new Date();

        console.log("now="+now);

        var endDate=new Date(endYear,endMonth-1,endDay);

        console.log("endDate="+endDate);

        //getTime()获取的值/1000=秒数
        var leftTime=endDate.getTime() - now.getTime();

        console.log("leftTime="+leftTime);

        var leftSecond=parseInt(leftTime/1000);

        console.log("leftSecond="+leftSecond);

        var day=Math.floor(leftSecond/(60*60*24));

        console.log("day="+day);

        var hour=Math.floor((leftSecond-day*24*60*60)/3600);

        console.log("hour="+hour);

        var minute=Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60);

        console.log("hour="+hour);

        var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);
        console.log("second="+second);

        var htmlElement=document.getElementById(divId);
        htmlElement.innerHTML = "<span class='day'><b class='timer'>" + day + "</b>天</span>" +
            "<span class='day'><b class='timer'>" + hour + "</b>时</span>" +
            "<span class='day'><b class='timer'>" + minute + "</b>分</span>" +
            "<span class='day'><b class='timer'>" + second + "</b>秒";
    }

    window.setInterval(function () { ShowTimer(2017, 7, 20, 'andy timer'); }, interval);


</script>