zoukankan      html  css  js  c++  java
  • js网页倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样。 

    一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样。
    js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来帮助!

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .leave_time_font{margin-left:35%;}
    #fo{margin-left:32%;}
    </style>
    <title>js网页倒计时,www.jbxue.com</title>
    </head>
    <body>
    <h1>WoYaoNi.CN </h1>
    <script src="./jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    var _countSeconds = 0;
    function _countDown(){
    _countSeconds ++;
    $('input.surplustime').each(function(index, element) {
    var $this = $(this); www.jbxue.com
    var _totalTime = Number($this.val()) - _countSeconds;
    var _day = parseInt(_totalTime/86400);
    var _hours = parseInt(_totalTime%86400/3600);
    var _minutes = parseInt(_totalTime%86400%3600/60);
    var _seconds = parseInt(_totalTime%86400%3600%60);
    var _strLite = '<span class="day">'+_day+'</span>天<span class="hour">'+_hours+'</span>小时<span class="minutes">'+_minutes+'</span>分<span class="seconds">'+_seconds+'</span>秒';
    var _str = '倒计时:'+_strLite;
    if($this.next('p.daojishi').length > 0){
    $this.next('p.daojishi').html(_str);
    }else if($this.next('p.leave_time_font').length > 0){
    $this.next('p.leave_time_font').html(_strLite);
    }
    });
    }
    setInterval(_countDown, 1000);
    })
    </script>
    </head>
    <body>
    <?php
    ini_set('date.timezone','Asia/Shanghai');
    $currenttime = time();
    $a = strtotime('2014-2-14 00:00');
    $b = $a-$currenttime;
    ?>

    <div id="djs">
    <div id="fo">小伙伴们距离情人节只剩:</div>
    <input type="hidden" name="surplustime" class="surplustime" value="<?php echo $b; ?>" />
    <p class="leave_time_font"><span class="day">0</span>天<span class="hour">0</span>小时<span class="minutes">0</span>分<span class="seconds">0</span>秒</p>
    </div>
    </body>
    </html>

  • 相关阅读:
    线段树lazy标记??Hdu4902
    3D游戏引擎〇 開始
    实时分析之客户画像项目实践
    ubuntu14.04系统中virtualbox安装Oracle VM VirtualBox Extension Pack包
    《Android源代码设计模式解析与实战》读书笔记(二十二)
    最长递增子序列的数量
    springmvc学习笔记(19)-RESTful支持
    hadoop(三):hdfs 机架感知
    hadoop(二):hdfs HA原理及安装
    hadoop(一):深度剖析hdfs原理
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3543480.html
Copyright © 2011-2022 走看看