适合php+js的动态倒计时脚本源码

一、html代码通过div来动态显示倒计时的结果

<div id="djs"></div>

<input type="text" value="2016-07-29 10:00:00"  id="time"/>

二、第二段代码是用来设置页面加载就调用这个倒计时的js 方法djstest();

$(document).ready(function(){

djstest();

})

三、第三段代码是 真正的通过js来动态的转换php的时间,此处时间为2016-07-29 10:00:00 这个格式。

//倒计时

function djstest(){

// 当前时间

var nowTime = new Date().getTime();

// 2016/12/22 hh:mm:ee

// 结束时间

var endTime = new Date(document.getElementById('time').value);

// 相差的时间

var t = endTime.getTime() - nowTime;

if(t<=0){

document.getElementById('djs').innerHTML ="活动已结束";

return false;

}

var d = Math.floor(t/1000/60/60/24);

var h = Math.floor(t/1000/60/60%24);

var i = Math.floor(t/1000/60%60);

var s = Math.floor(t/1000%60);

document.getElementById('djs').innerHTML = "距离活动结束还有:"+d+"天"+h+"时"+i+"分"+s+"秒";

setTimeout(djstest, 1000);

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,736评论 0 8
  • html结构层 (1)指定日期的倒计时 js结构层 //每次刷新都是1分钟的倒计时,var t=3600000;f...
    痛心凉阅读 2,962评论 0 1
  • html结构层 (1)指定日期的倒计时 js结构层 //每次刷新都是1分钟的倒计时, var t=3600...
    电影里的梦i阅读 1,501评论 0 0
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,190评论 0 5
  • 定好时间,十五分钟,紧张的写作又开始了,此刻,我的身上微微出汗,打错了几个字,手机屏幕暗下来了,可能自己弄成了省电...
    水玲珑英子阅读 838评论 0 2