zoukankan      html  css  js  c++  java
  • jQuery+PHP动态显示(项目)实时时间和倒计时

    jQuery动态显示当前时间:
        html代码:<div id="current_time"></div>

    setInterval()使用:setInterval(functionName,timeOut);

    setInterval使用示例:
        jQuery代码:

      <script type="text/javascript">
        setInterval(function() {
            var now = (new Date()).toLocaleString();
            $('#current-time').text(now);
        }, 1000);
      </script>

    整合示例教程-->jQuery+PHP动态显示项目倒计时:

    html代码:

                <ul class="public-time-left">
                    <li><p id="time_d"></p><span>天</span></li>
                    <li><p id="time_h"></p><span>小时</span></li>
                    <li><p id="time_m"></p><span>分</span></li>
                    <li><p id="time_s"></p><span>秒</span></li>
                </ul>
    

      

    PHP代码:  //以TP框架为例,将php后台数据【项目截止时间】传到前端

    $this->assign("endtime",$end_time);     //不是时间戳,是格式化后的时间,方便js计算

    jQuery代码:

    //比如写在一个.js文件里,在html页面引入即可。

    /*倒计时*/
    function GetRTime(){
        var voere=voertime;    
    //不是时间戳,是格式化后的时间,方便js计算
    var EndTime= new Date(voere); var NowTime = new Date(); var t =EndTime.getTime() - NowTime.getTime(); var d=0; var h=0; var m=0; var s=0; if(t>=0){ d=Math.floor(t/1000/60/60/24); h=Math.floor(t/1000/60/60%24); m=Math.floor(t/1000/60%60); s=Math.floor(t/1000%60); } document.getElementById("time_d").innerHTML = d ; document.getElementById("time_h").innerHTML = h ; document.getElementById("time_m").innerHTML = m ; document.getElementById("time_s").innerHTML = s ; }

      

    最后一步:在html页面的脚本里调用引入js的GetRTime方法

    /* setInterval()很重要:作用是每隔一定时间就调用函数,方法或对象。 */

    <script type="text/javascript">var voertime = '{$deal_info.over_time}';    //php的截止时间,不是时间戳,是格式化后的时间,方便js计算
     {if ($deal_info.end_time > $now or $deal_info.end_time eq 0) and $deal_info.begin_time < $now and $deal_info.is_effect eq 1 } setInterval(GetRTime,0); {/if} </script>
  • 相关阅读:
    ATHEROS: ART分区中的数据解析
    提问的智慧<转自chinaunix>
    <转>使用valgrind检查内存问题
    openwrt 文件系统加载分析
    openwrt启动脚本分析
    突发奇想20150126
    Openwrt netifd ubus解析
    <转>如何调试makefile
    openwrt拆离dl目录和toolchain的方法
    建立Go工作环境
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/6805423.html
Copyright © 2011-2022 走看看