php+js实现倒计时功能

js部分


代码如下:

setInterval("time_controller()",1000);
function time_controller(){
    $(".time_val").each(function(){
         var time_id = "time_show_"+$(this).attr('for');
         var time_val= $(this).attr('value');
         $(this).attr('value',time_val-1);
         show_time(time_id,time_val*1000);
    });
}
function show_time(id,timestamp)
{
    var timer = document.getElementById(id);
    var str_time,int_day,int_hour,int_minute,int_second;
    var time_distance = timestamp;
    if(time_distance>0)
    {
          int_day=Math.floor(time_distance/86400000)
          time_distance-=int_day*86400000;
          int_hour=Math.floor(time_distance/3600000)
          time_distance-=int_hour*3600000;
          int_minute=Math.floor(time_distance/60000)
          time_distance-=int_minute*60000;
          int_second=Math.floor(time_distance/1000)

if(int_hour<10)
           int_hour="0"+int_hour;
          if(int_minute<10)
           int_minute="0"+int_minute;
          if(int_second<10)
           int_second="0"+int_second;
          str_time="<b>剩余时间："+int_day+"天"+int_hour+"小时"+int_minute+"分钟"+int_second+"秒</b>";
          timer.innerHTML=str_time;
    }else{
          timer.innerHTML="<b>剩余时间： 0天0小时0分钟0秒</b>";
    }
}

html部分，php 和 js 的时间倒计时

代码如下:

<div class="time" id="time_show_{$list.cmd_id}"></div>
 <input type="hidden"  class="time_val" for="{$list.cmd_id}" value="{$list.time_val}" />

赞 (0)

相关推荐

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • JavaScript在控件上添加倒计时功能的实现代码

    JavaScript在控件上添加倒计时功能的实现代码

    一.概述 在有些 报表 需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询 当倒计时结束的时候,查询功能可用 这种功能如何实现的呢 二.实现思路 主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInt

  • js实现网页倒计时、网站已运行时间功能的代码3例

    1.jQuery.countdown插件 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义.目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/例如: 复制代码 代码如下: <div id="getting-started"></div><script src="

  • JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

    废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

  • js实现发送验证码后的倒计时功能

    之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=

  • javascript倒计时功能实现代码

    代码如下: 复制代码 代码如下: /** * 倒计时 * * @author WadeYu * @date 2012-04-20 17:40 * @copyright boyaa.com */ var TimeCountDown = function( initTime ){ var day = 0; var hour = 0; var minute = 0; var second = 0; var timerId = 0; var self = this; var fixInitTime =

  • JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

    JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

    本文实例讲述了JS秒杀倒计时功能.分享给大家供大家参考,具体如下: 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="miaosha();"> <p class="tit_right" style="

  • 纯js实现倒计时功能

    通过js实现页面的倒计时功能. 思路: 传入一个秒数c,c/60可以得到分钟m, c%60可以得到显示的秒数s,同理,再将m/60可是得到小时数, m/%可以得到分钟数.通过setInterval每次将总秒数-1,并将计算所得时间显示到页面上. 第一版的肮脏代码如下, 可以作为反面教材思考一下 <html> <head> <title>Tomato</title> <meta http-equiv="Content-Type" co

  • php+js实现倒计时功能

    js部分 复制代码 代码如下: setInterval("time_controller()",1000);function time_controller(){    $(".time_val").each(function(){         var time_id = "time_show_"+$(this).attr('for');         var time_val= $(this).attr('value');        

  • 原生js实现倒计时功能（多种格式调用）

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时-多种格式调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&qu

  • JS实现针对给定时间的倒计时功能示例

    JS实现针对给定时间的倒计时功能示例

    本文实例讲述了JS实现针对给定时间的倒计时功能.分享给大家供大家参考,具体如下: 有时候,网站需要一个倒计时的特效来庆祝某些特别的日子.自己也实现了一个,占用内存也很小噢.其原理就是每隔一秒执行一次处理函数,将终点时间和现在的时间比较然后换算之后显示对应的值. 效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时</titl

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

  • JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

    应用场景 在开发"发送短信验证"功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题.一般原理是"当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时".如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击.提供以下解决方案: 利用cookie存储倒计时 利用HTML5的localStorage 存储倒计时 利用cookie存储倒计时 发送成功后把剩余倒计时存储到coo

  • JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

    1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

随机推荐