求个js 倒计时时js

在 SegmentFault,解决技术问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们,都在这里:
获取验证码
已有账号?
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
想要做一个每一个商品都有一个独立的倒计时的页面,类似于电商网站的限时抢购。商品的倒计时开始结束时间都是在后台接口中返回,存在在一个JSON数组中,然后通过Angularjs的ng-repeat循环输出到HTML页面中。
JSON格式如下:
[{'id':'001'
'ImgUrl':'img.jpg'
'startTime' : ' 17:03:40'
'endTime': ' 17:03:50'},
{'id':'002'
'ImgUrl':'img.jpg'
'startTime' : ' 17:02:40'
'endTime': ' 17:03:50'},
{'id':'003'
'ImgUrl':'img.jpg'
'startTime' : ' 17:01:40'
'endTime': ' 17:03:50'}]
在网上找了很多js倒计时代码但都只能同一页面使用一次的。请问该如何将这些倒计时显示到HTML页面上?搞不懂要如何可以将每个商品的时间输入到倒计时的代码中,然后还能独立运行。
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
创建一个时间类Timer.
每个商品的倒计时生成一个实例:var time = new Timer();
*startime 应该是毫秒数
var Alarm = function (startime, endtime, countFunc, endFunc) {
this.time = Math.floor((endtime - startime) / 1000); //时间
this.countFunc = countF //计时函数
this.endFunc = endF //结束函数
this.flag = 't' + Date.parse(new Date()); //
Alarm.prototype.start = function () {
var self =
self.flag = setInterval(function () {
if (self.time & 0) {
clearInterval(self.flag);
self.endFunc();
console.log('计时结束');
var minute, hour, day,
day = Math.floor(self.time / 60 / 60 / 24) & 10 ? '0' + Math.floor(self.time / 60 / 60 / 24) : Math.floor(self.time / 60 / 60 / 24);
hour = Math.floor(self.time / 60 / 60 % 24) & 10 ? '0' + Math.floor(self.time / 60 / 60 % 24) : Math.floor(self.time / 60 / 60 % 24);
minute = Math.floor(self.time / 60 % 60) & 10 ? '0' + Math.floor(self.time / 60 % 60) : Math.floor(self.time / 60 % 60);
second = Math.floor(self.time % 60) & 10 ? '0' + Math.floor(self.time % 60) : Math.floor(self.time % 60);
//倒计时执行函数
self.countFunc(second, minute, hour, day);
self.time--;
如果调用:
var time1 = new Alarm(startime, endtime, countFunc, endFunc);
time1.start();
var time2 = new Alarm(startime, endtime, countFunc, endFunc);
time2.start();
调用示例:
var countTime = function () {
var eles = $('.count_time'),
len = eles.
for (; len & 0; len--) {
var ele = eles.eq(len - 1);
(function (ele) {
startTime = new Date(ele.attr('data-start-time')).getTime(),
endTime = new Date(ele.attr('data-end-time')).getTime(),
alarm = new Alarm(startTime, endTime, function (second, minute, hour, day) { //计时钟
ele.text(hour + ':' + minute + ':' + second);
}, function () { //倒计时结束
ele.text('00:00:00');
window.location.reload();
alarm.start();
countTime();
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
同步到新浪微博
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:还没有任何记录...
倒计时js代码精确到时分秒
来源:建站素材
作者: 懒人建站
倒计时js代码精确到时分秒,使用方法:注意 var EndTime= new Date(' 10:00:00'); //截止时间 这一句,特别是 ' 10:00:00' 这个js日期格式一定要注意,否则在IE6、7下工作计算不正确哦
我们为您提供-
懒人建站只收录实用和能提高用户体验的代码
我们只想解放出你的部分写代码时间来思考更高层次的设计。
倒计时js代码精确到时分秒,使用方法:注意 var EndTime= new Date(' 10:00:00'); //截止时间 这一句,特别是 ' 10:00:00' 这个js日期格式一定要注意,否则在IE6、7下工作计算不正确哦。
js代码如下:
function GetRTime(){
&&&&&& var EndTime= new Date(' 10:00:00'); //截止时间 前端路上 /qd63/
&&&&&& var NowTime = new Date();
&&&&&& var t =EndTime.getTime() - NowTime.getTime();
&&&&&& /*var d=Math.floor(t//24);
&&&&&& t-=d*(*24);
&&&&&& var h=Math.floor(t/);
&&&&&& t-=h*60*60*1000;
&&&&&& var m=Math.floor(t/1000/60);
&&&&&& t-=m*60*1000;
&&&&&& var s=Math.floor(t/1000);*/
&&&&&& var d=Math.floor(t//24);
&&&&&& var h=Math.floor(t/%24);
&&&&&& var m=Math.floor(t/);
&&&&&& var s=Math.floor(t/1000%60);
&&&&&& document.getElementById(&t_d&).innerHTML = d + &天&;
&&&&&& document.getElementById(&t_h&).innerHTML = h + &时&;
&&&&&& document.getElementById(&t_m&).innerHTML = m + &分&;
&&&&&& document.getElementById(&t_s&).innerHTML = s + &秒&;
&& setInterval(GetRTime,1000);
本文链接:/js/texiao/jsdjs.html
(责任编辑:懒人建站)
倒计时js代码精确到时分秒由懒人建站收集整理,您可以自由传播,请主动带上本文链接
就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。
倒计时js代码精确到时分秒-相关文章点击按钮出现60秒倒计时的简单js代码(推荐)
投稿:jingxian
字体:[ ] 类型:转载 时间:
下面小编就为大家带来一篇点击按钮出现60秒倒计时的简单js代码(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
点击按钮出现60秒倒计时的简单js代码(推荐)
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&点击按钮出现60秒倒计时的简单js代码(推荐)&/title&
&script type="text/javascript" src="js/jquery.js"&&/script&
&input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /&
&script type="text/javascript"&
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="免费获取验证码";
countdown = 60;
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
setTimeout(function() {
settime(val)
以上这篇点击按钮出现60秒倒计时的简单js代码(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具后使用快捷导航没有帐号?
只需一步,快速开始
查看: 7387|回复: 3
求一个一分钟倒计时的JS代码
UID213352在线时间 小时积分1779帖子离线17476 天注册时间
银牌会员, 积分 1779, 距离下一级还需 1221 积分
求一个一分钟倒计时的JS代码,只显示一分钟倒计时的。比如 : 00:01:00这样的,不知道那位兄弟共享下,百度了好久都没有看到。。。谢了。
UID531346在线时间 小时积分52帖子离线17476 天注册时间
初级会员, 积分 52, 距离下一级还需 148 积分
写了一简单的一分倒计时,不知道行不行
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&count down&/title&
&script type=&text/javascript&&
var seconds = 59;
var speed = 1000;
var span = document.createElement('span');
& & & & document.body.appendChild(span);
function countDown(seconds,speed){
& & & & & & & & var txt = &00 : & + ((seconds & 10) ? &0& + seconds : seconds) + & : 00&;
& & & & & & & & span.innerHTML =
& & & & & & & & var timeId = setTimeout(&countDown(seconds--,speed)&,speed);
& & & & & & & & if(seconds == 0){
& & & & & & & & & & & & clearTimeout(timeId);
& & & & & & & & };
countDown(seconds,speed);
UID625436在线时间 小时积分205帖子离线17476 天注册时间
中级会员, 积分 205, 距离下一级还需 295 积分
多谢啦,学习到了
UID213352在线时间 小时积分1779帖子离线17476 天注册时间
银牌会员, 积分 1779, 距离下一级还需 1221 积分
不错。。谢谢
Powered by博客分类:
打算写几篇博客总结下近来做的一个东西:
项目中要用到倒计时,找了几个,发现有比较漂亮的,当不支持ie6/ie7,后来没办法就做了兼容。现在将兼容方案介绍下:
在网上找了一个比较漂亮的javascript倒计时功能,效果如下:
用法就比较简单了,官网上都有,就不详细介绍了。官网地址:
这个的效果就比较差了:
具体用法就不写了,这个地方顺便附上判断ie浏览器的脚本。
$PCenter.ISIE = /msie (\d+\.\d+)/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) :
$PCenter.ISIE6 = /msie 6.0/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) :
$PCenter.ISIE7 = /msie 7.0/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) :
$PCenter.ISIE8 = /msie 8.0/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) :
&div id="countdown_container"&
&div id="beautifulCounter"&
&div class="ccounter"&
&input class="knob hour" data-width="160" data-min="0" data-max="24" data-displayPrevious=true data-fgColor="#368cfd" data-readOnly="true" value="1"&
&input class="knob minute" data-width="160" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#9dd97f" data-readOnly="true" value="1"&
&input class="knob second" data-width="160" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#ffdd57" data-readOnly="true" value="0"&
&div class="ccounter_title"&
&div class="ccounter_label_hour"&&span&小时&/span&&/div&
&div class="ccounter_label"&&span&分&/span&&/div&
&div class="ccounter_label"&&span&秒&/span&&/div&
&div id="normalCounter" class="big-countdown"&
&div id="clock"&
if($PCenter.ISIE6 || $PCenter.ISIE7 || $PCenter.ISIE8){
$("#beautifulCounter").remove();
$('#clock').countdown(' 20:00:00', function(event) {
var $this = $(this).html(event.strftime(''
+ '&span style="background-color: #368cfd"&%H&/span& 小时 '
+ '&span style="background-color: #9dd97f"&%M&/span& 分 '
+ '&span style="background-color: #ffdd57" &%S&/span& 秒'));
$("#normalCounter").remove();
$(".ccounter").ccountdown(,'20:00');
浏览: 854977 次
来自: 北京
ddnzero 写道博主请问FileUtils这个类是哪个包的 ...
博主请问FileUtils这个类是哪个包的?还是自己的呢?能放 ...
为什么会intMap.get(&bbb&) ...
感觉LogManager打开了所有的LogSegment(文件 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'

我要回帖

更多关于 js 倒计时 的文章

 

随机推荐