您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

js实现倒计时与网站运行时间特效

发布时间:2016-01-31编辑:余斗文件大小:35KB阅读:(0)字号:
      给博客底部加了一个统计网站运行时间的计时器,突然发现用js实现类似倒计时功能的方法不止一种,余斗目前已知的就有三种方法:   一、网站运行时间统计   显示格式:已运行0 年 1 天 0 小时 4 分钟 35 秒(秒为跑秒)   代码为:

    <span id="sitetime"></span>
    <script language=javascript>
    function siteTime(){
    window.setTimeout("siteTime()", 1000);
    var seconds = 1000
    var minutes = seconds * 60
    var hours = minutes * 60
    var days = hours * 24
    var years = days * 365
    var today = new Date()
    var todayYear = today.getFullYear()
    var todayMonth = today.getMonth()
    var todayDate = today.getDate()
    var todayHour = today.getHours()
    var todayMinute = today.getMinutes()
    var todaySecond = today.getSeconds()
    /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
    year - 作为date对象的年份,为4位年份值
    month - 0-11之间的整数,做为date对象的月份
    day - 1-31之间的整数,做为date对象的天数
    hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
    minutes - 0-59之间的整数,做为date对象的分钟数
    seconds - 0-59之间的整数,做为date对象的秒数
    microseconds - 0-999之间的整数,做为date对象的毫秒数 */

    var t1 = Date.UTC(2014,0,14,11,19,00)
    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
    var diff = t2-t1
    var diffYears = Math.floor(diff/years)
    var diffDays = Math.floor((diff/days)-diffYears*365)
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
    document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"
    }
    siteTime()
    </script>
     
      二、jQuery实现倒计时功能   jQuery.countdown插件实现,需要加载jQuery相关文件, 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)   一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义。   代码为:

    <div id="getting-started"></div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.countdown.js"></script>
    <script type="text/javascript">
        $('#getting-started').countdown('2051/01/31 23:05', function(event) {
            $(this).html(event.strftime('倒计时:%w 周 %d 天 %H:%M:%S'));
        });
    </script>
     
      注意:如果需要一共还有多少天数用%D,参数说明:

    Y: "years"
    m: "months"
    w: "weeks"
    d: "days"
    D: "totalDays"
    H: "hours"
    M: "minutes"
    S: "seconds"
     
      三、js实现倒计时功能   显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)   代码为:

    <div id="time" class="time"></div>
    <script language=javascript>
    function show_date_time(){
      window.setTimeout("show_date_time()", 1000);
      target=new Date(2014,0,15,17,0,0); //注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。
      today=new Date();

      timeold=(target.getTime()-today.getTime());

      sectimeold=timeold/1000
      secondsold=Math.floor(sectimeold);
      msPerDay=24*60*60*1000
      e_daysold=timeold/msPerDay
      daysold=Math.floor(e_daysold);
      e_hrsold=(e_daysold-daysold)*24;
      hrsold=Math.floor(e_hrsold);
      e_minsold=(e_hrsold-hrsold)*60;
      minsold=Math.floor((e_hrsold-hrsold)*60);
      seconds=Math.floor((e_minsold-minsold)*60);

        if (daysold<0) {
        document.getElementById("time").innerHTML="逾期,倒计时已经失效";
    }
      else{
      if (daysold<10) {daysold="0"+daysold}
      if (hrsold<10) {hrsold="0"+hrsold}
      if (minsold<10) {minsold="0"+minsold}
      if (seconds<10) {seconds="0"+seconds}
      if (daysold>0) {
        document.getElementById("time").innerHTML="距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
      }
      else
        document.getElementById("time").innerHTML="<font color=red>距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>"; //结束时间小于1天,字体呈红色提醒
    }
    }
    show_date_time();
    </script>
     

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词JS倒计时
余斗余斗
  1. 转载请注明:js实现倒计时与网站运行时间特效
  2. 版权声明:本站原创文章,由发表在Html5模版分类下,于2016-01-31最后更新
推荐:好玩的CSS3抖动特效——Shake
jQuery实现一个滚动特效的时间轴
手机扫一扫 随身带着看
鸿运国际手机登录首页