Javascript倒计时效果

来源：互联网发布：淘宝管理团队编辑：程序博客网时间：2024/06/05 07:41

财富、兴趣、幸福、荣誉和成功是几乎每个人都想追求的。当你必须作出唯一选择的时候，自己的兴趣往往比名利更重要

Index.html

<!DOCTYPE html ><html><head><title>倒计时</title><style type="text/css">        .colockbox        {            width:500px;            height:20px;             color:#000000;        }        .colockbox span        {        float:left;display:block;        width:20px;        height:20px;        line-height:20px;        font-size:18px;         font-weight:bold;        text-align:center;        color:#ffffff;          text-indent:3px;         }        .square         {            float:left;            width:26px;            height:20px;            background-color:#222222;            border-radius:3px;            padding:0px;            margin-right:5px;        }</style><script type="text/javascript" src="jquery-1.11.3.js"></script><script type="text/javascript">$(function(){    countDown("2016/12/25 23:00:00","#colockbox1");});function countDown(time,id){    var day_elem = $(id).find('.day');    var hour_elem = $(id).find('.hour');    var minute_elem = $(id).find('.minute');    var second_elem = $(id).find('.second');    var end_time = new Date(time).getTime(),//月份是实际月份-1     sys_second = (end_time-new Date().getTime())/1000;     var timer = setInterval(function(){        if (sys_second > 1) {            sys_second -= 1;            var day = Math.floor((sys_second / 3600) / 24);            var hour = Math.floor((sys_second / 3600) % 24);            var minute = Math.floor((sys_second / 60) % 60);            var second = Math.floor(sys_second % 60);            day_elem && $(day_elem).text(day);//计算天            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟            $(second_elem).text(second<10?"0"+second:second);//计算秒杀        } else {             clearInterval(timer);        }    }, 1000);}</script></head><body><div class="colockbox" id="colockbox1"> <div class="square"> <span class="day">00</span> </div><span style="color:gray;font-size:15px; float:left;">天</span><div class="square"> <span class="hour">00</span> </div><span style="color:gray;font-size:15px; float:left;">时</span><div class="square"> <span class="minute">00</span> </div><span style="color:gray;font-size:15px; float:left;">分</span><div class="square"> <span class="second">00</span> </div><span style="color:gray;font-size:15px; float:left;">秒</span></div></body></html>

运行结果如图:

这里写图片描述

0 0