当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

js实现倒计时demo实例实现多少天多少小时多少分钟多少秒

发表:管理员  发表时间:2020-09-11 10:05:35   阅读:(1958)次  

<!DOCTYPE html>

<html>

<head>

<title>草莓互联-倒计时效果</title>

 

<style>

.wrap {width:400px; margin:50px auto; color:#333; font-family:'5FAE8F6F96C59ED1';}

.wrap-date {font-size:0; list-style:none outside none; margin-top:8px;}

.wrap-date li {width:80px; display:inline-block; *display:inline; *zoom:1; text-align:center; font-size:24px; background:hotPink; padding:1px 0 5px; margin-right:3px;}

.date {font-family:Tahoma; font-size:50px; color:#fff;}

#endTips {color:#999; background:#e9e9e9; line-height:2.4em; text-align:center; margin-top:15px;}

</style>

 

<script type="text/javascript">

    var targetDate = '2022-09-11';// 目标日期du(活动截止zhi时间)

 

    // 创建倒计时定时器

    var timer = window.setInterval(function(){

        RefreshTime(targetDate);

    },1000);

 

    function RefreshTime(targetDate){       

        // 获取本地当前时间,截止时间 - 当前时间 = 倒计时时间

        var Today = new Date();

        var endDate = new Date(targetDate);

        var leftTime = endDate.getTime() - Today.getTime();

        var leftSecond = parseInt(leftTime / 1000);

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

        var Hour = Math.floor((leftSecond - Day * 24 * 60 * 60) / 3600);

        var Minute = Math.floor((leftSecond - Day * 24 * 60 * 60 - Hour * 3600) / 60);

        var Second = Math.floor(leftSecond - Day * 24 * 60 * 60 - Hour * 3600 - Minute * 60);

 

        if (Day < 0) {

            clearInterval(timer); // 清除定时器

            document.getElementById('endTips').innerHTML = '活动已结束';

            document.getElementById('wrapDate').style.display = 'none';

            return;

        }

         

        // 写入容器

        document.getElementById('timeDay').innerHTML = Day;

        document.getElementById('timeHour').innerHTML = Hour;

        document.getElementById('timeMin').innerHTML = Minute;

        document.getElementById('timeSec').innerHTML = Second;

}

</script>

</head>

<body>

 

<div class="wrap">

距活动结束仅剩:

   <ul class="wrap-date" id="wrapDate">

       <li><span id="timeDay" class="date">0</span>天</li>

       <li><span id="timeHour" class="date">0</span>时</li>

       <li><span id="timeMin" class="date">0</span>分</li>

       <li><span id="timeSec" class="date">0</span>秒</li>

   </ul>  

   <div id="endTips"></div>

</div>

 

</body>

</html>


 

假如我们资讯/文章对您有所帮助,您可以通过扫描捐赠二维码支持一下我们~

感谢您对我们的支持,您的小小支持让我们有信心走得更远!

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证