头像

jQuery简单的倒计时功能

2020-05-19 14:38:08 收藏 来源:it素材网   浏览(183)   评论 ( 0 )   

jQuery简单的倒计时功能
jQuery简单的倒计时功能,也可以做简单的修改指定结束时间,如距离杭州亚运会倒计时
查看演示 下载资源:1 下载资源 下载积分:0

jQuery简单的倒计时功能,也可以做简单的修改指定结束时间

代码实现:

js

<script type="text/javascript">
var intDiff = parseInt(60);//倒计时总秒数量
function timer(intDiff){
    window.setInterval(function(){
    var day=0,
        hour=0,
        minute=0,
        second=0;//时间默认值        
    if(intDiff > 0){
        day = Math.floor(intDiff / (60 * 60 * 24));
        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    }
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;
    $('#day_show').html(day+"天");
    $('#hour_show').html('<s id="h"></s>'+hour+'时');
    $('#minute_show').html('<s></s>'+minute+'分');
    $('#second_show').html('<s></s>'+second+'秒');
    intDiff--;
    }, 1000);
} 
$(function(){
    timer(intDiff);
}); 
</script>

html

<h1>网页上的倒计时</h1>
<div class="time-item">
    <span id="day_show">0天</span>
    <strong id="hour_show">0时</strong>
    <strong id="minute_show">0分</strong>
    <strong id="second_show">0秒</strong>
</div>


标签: 倒计时
声明:转载请注明来源(it素材网)并保留原文链接:https://www.itsucai.com/js/263.html
评论0

后面还有条评论,点击查看>>

系统已开启自动识别垃圾评论机制,识别到的自动封号!!!