博客列表 >jquery实现日期倒计时

jquery实现日期倒计时

左手Leon的博客
左手Leon的博客原创
2019年04月08日 19:43:29820浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期倒计时</title>
    <style type="text/css">
        *{margin:0;padding: 0}
        div{
            font-size: 40px;
            width: 1200px;
            height: 200px;
            margin:100px auto;
            background:green;
            line-height: 180px;
            color: #fff;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>
<body>
    <div id='box'>
        <p>2019年劳动节倒计时:<span></span></p>
    </div>


    <script>
        $(document).ready(function(){
            function countDown(){
                var d=Date.parse("May 01,2019");
                // console.log(d);
                var date=new Date();
                var dd=date.getTime();
                var rd=Math.floor((d-dd)/1000);
                var days=Math.floor(rd/86400);
                var hours=Math.floor(rd%86400/3600);
                var minutes=Math.floor(rd%3600/60);
                var seconds=Math.floor(rd%60);
                $('span').text(days+'天'+hours+'小时'+minutes+'分'+seconds+'秒')
                // console.log(hours);
            }
            setInterval(countDown,1);

        })
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议