html隐藏域倒计时,一个网页倒计时的实现

最近要做一个网站上的活动倒计时的功能。在网上搜了一下，网上关于js倒计时的代码倒是不少，但是正正可以应用到生产环境的则是少之又少。

比如我用到的这个就是这样的：

var endDate=new Date(2014,7,25,23,59,59);

var begin = new Date();

var intDiff=Math.round((endDate.getTime()-begin)/1000);//初始日期

function timer(intDiff){

window.setInterval(function(){

var day=0,

hour=0,

minute=0,

second=0;//时间默认值

if(intDiff > 0){

day = Math.floor(intDiff / (60 * 60 * 24));

hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

}

if(day==0&&hour==0&&minute==0&&second<=0){

$("#timeshow").html("活动结束。");

}

if (minute <= 9) minute = '0' + minute;

if (second <= 9) second = '0' + second;

$('#day_show').html(day+'天');

$('#hour_show').html(hour+'小时');

$('#minute_show').html(minute+'分');

$('#second_show').html(second+'秒');

intDiff--;

}, 1000);

}

$(function(){

timer(intDiff);

});

看到了没，由于js是运行在客户端的，无法拿到服务器的时间，所以会导致“一千个读者眼里又一千个哈姆雷特”，这样是不对的，所以要获得服务器的时间。

第一想到的是用ajax请求获得服务器的时间，但是会有问题，ajax是异步请求，js执行到那一段的时候ajax还没有执行完成，所以会出现取不到值得情况。所以否决了这样的做法。

解决方法是：

"/>

在请求到这个页面之前，把时间放到atrribute里面，在页面拿到这个值，放到一个隐藏域里面。注意：定时器的代码要放到取值操作的后米阿尼，否则会出现隐藏域时空的情况。

Get!

html隐藏域倒计时,一个网页倒计时的实现相关推荐

html 倒计时字体消失,最简单的一个网页倒计时代码时间到期后会显示出提醒内容收藏版...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼很多时候我们都是需要提醒自己做什么事情的,像我这么健忘的,更加需要倒计时之类的记录来提醒自己,这是我找到最简单简介的代码了! 最简单的一个网页倒计时代码 ...
解决layui隐藏域：不显示问题（含案例、代码、截图）
layui 隐藏域:不显示问题(案例篇) 自定义的隐藏域不显示? 只需要给隐藏域添加一个layui-input类名即可,其他不用改变. 案例 · 效果图: 代码示下: <!DOCTYPE htm ...
jquery/js实现一个网页同时调用多个倒计时(最新的)
jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! //js //js ...
网页html通过隐藏域传送数据给web服务器
form表单输入框input设置disable属性后,提交表单,该input不会一并提交.解决该类问题可以使用一个type=hidden隐藏要获取值的input,再使用disabled显示给用户看的i ...
js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
手机怎样设置一个高考倒计时便签,可以天天看见那种
现在距离2022年高考还有不到100天的时间,为了加强对高考的重要,一些老师或学生想要在手机上设置一个高考倒计时提醒事项,可以天天看见的那种.那手机怎么设置一个高考倒计时便签呢?其实,在手机上使用云便 ...
用 JavaScript 写一个新年倒计时
目录前言: 主题: 运行结果: 对应素材: 代码实现思路: 运行代码: 春节的由来: 总结: 前言: 在春节即将到来,钟声即将响起,焰火即将燃起的日子里,本篇文章带着祝福先送去给你.愿你在新的一年里 ...
一起设计一个Android倒计时组件
文章来源:一起设计一个Android倒计时组件 1 背景我们在项目中经常有倒计时的场景,比如活动倒计时.抢红包倒计时等等.通常情况下,我们实现倒计时的方案有Android中的CountDownTim ...
前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，lt;caption表格标题）
表单<form>(块元素) 表单的概念:表单主要用来获取用户数据(信息),如:注册表单, 查询表单,登录表单. 表单的工作原理: 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行 ...
input 标签中的 Hiden隐藏域
上面是html中的隐藏域.主要作用为: 1 .隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用.浏览者单击发送按钮发送表单的时候,隐藏域的信息 ...

html隐藏域倒计时,一个网页倒计时的实现

html隐藏域倒计时,一个网页倒计时的实现相关推荐

最新文章

热门文章