html计时器重置,Javascript重置倒计时
你好
我有一个javascript倒计时的问题,我写了一个脚本,并没有坏.
我需要在几分钟之后通过ajax(json)重新加载倒计时但是在加载新数据脚本后无法正常工作.
在获得新的计时时间后倾倒或不显示!
帮我请求
谢谢 :)
var d = today();
function today(){
now = new Date().getTime();
return Math.round(now/1000);
}
function countdown(time1,id)
{
off = today() - d;
time = time1 - off;
h = Math.floor(time / 3600);
m = Math.floor(time / 60) % 60;
s = time % 60;
t = h + ":";
if(m < 10){ t += "0"; }
t += m + ":";
if (s < 10) { t += "0"; }
t += s;
//done
if(m <= 0 && s <= 0){
$("#"+id).html("00:00:00");
return;
}
$("#"+id).html(t).show();
var sto = window.setTimeout("countdown('"+time1+"','"+id+"')", 1000);
}
$(document).ready(function(){
//clearTimeout(sto);
countdown(1000, 'timer1');
countdown(1200, 'timer2');
//example (instead of json)
setTimeout(function(){
countdown(3000, 'timer1');
countdown(3200, 'timer2');
//alert('after click ok scripts is worked!');
}, 3000)
});
解决方法:
您可以通过执行window.clearTimeout(sto)来重置超时.
James Khoury建议在声明var sto后从sto中删除var关键字;在全局命名空间中.
下面我总结一下如何在javascript中做这些时间事情:
让我们从一些日期和时间操作函数开始:
// Time functions
// default unit is the millisecond
var sec = 1000;
var ms = 1;
function formatSeconds(time) {
var seconds = Math.floor(time/1000);
with (Math) {
var sec = seconds % 60;
var min = floor(seconds/60) % 60;
var hr = floor(seconds/3600);
}
return hr+':'+min+':'+sec;
}
function now() {
return (new Date()).getTime();
}
现在实际有趣的代码:
// Timeout functions
function callPeriodically(params) {
/*
* PARAMS: {callback=function, callbackInterval=int, cleanupCallback=function}
*
* WHAT THIS FUNCTION DOES:
* Calls [[callback()]] every [[callbackInterval]] milliseconds;
* (The [[callback()]] function should return false if it wishes
* to abort callbacks.)
*
* RETURN VALUE: a function which, when called, will abort the periodic callbacks.
*
* Nomatter how periodic callbacks are aborted, the [[cleanupCallback()]] function
* is always run last thing.
*/
var callback = params['callback'];
var callbackInterval = params['callbackInterval'];
var cleanupCallback = params['cleanup'];
var timeout = window.setTimeout(makeClock());
var timer = function() {
if (callback()) # stop if callback() returns false
timeout = window.setTimeout(timer, callbackInterval);
else if (cleanupCallback)
cleanupCallback();
};
var cancel = function() {
window.clearTimeout(timeout);
cleanupCallback();
}
return cancel;
}
使用上述机器进行时钟回调:
function makeClockCallback(duration, htmlId) {
// enclose endTime in a closure:
var startTime = now();
var endTime = startTime + duration;
var countdown = function() {
var timeLeft = endTime - now();
$('#'+htmlId).html(formatSeconds(timeLeft));
return timeLeft>0; # continue as long as timeLeft>0
};
return countdown;
}
现在让我们测试一下:
// Demo
function makeAndRunClock(htmlId) {
return callPeriodically({
callback = makeClockCallback(1000*sec, htmlId),
callbackInterval = 1000*ms,
cleanupCallback = function() {
alert(htmlId+' has been cancelled!');
}
);
}
var abortClock1 = makeAndRunClock(7*sec); // will naturally stop after 7sec
var abortClock2 = makeAndRunClock(10*sec); // will naturally stop after 10sec
window.setTimeout(
function() {
abortClock1(); // force clock1 to stop after 4sec
},
4*sec
);
有一些语法错误,但你去了.
标签:jquery,javascript,countdown
来源: https://codeday.me/bug/20190630/1338758.html
html计时器重置,Javascript重置倒计时相关推荐
- C语言电子闹钟(显示时间、计时器、闹钟、倒计时、世界时钟)C语言大作业
#include <stdio.h> #include <time.h> //时间函数 #include <conio.h> //字符模式函数 #include & ...
- 使用 javaScript 编写倒计时小程序,到时提交表单
使用 javaScript 编写倒计时小程序,到时提交表单 <script type="text/javascript">var countdown = 10; // ...
- 重置已清账项目及两种不同重置方式(只重置、重置并冲销)介绍和实操-FBRA
文章目录 一.重置已清账项目介绍 1.1 重置方式:只重置 1.2 重置方式:重置并冲销 二.业务实操 2.1 验证是否可以直接冲销-FB08 2.2 重置方式:只重置 2.3 重置方式:重置并冲销 ...
- html广告倒计时代码,javascript实现倒计时关闭广告
用Javascript实现倒计时关闭广告案例 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广 ...
- 利用JavaScript实现倒计时
利用JavaScript实现倒计时 利用JS中的Date对象即可实现,创建目标时间和当前时间,利用getTime函数将两个时间转换成距离1970-01-01的秒数,相减后转化为年月日即可 利用JS中的 ...
- JavaScript 实现倒计时代码
以下是使用 JavaScript 实现页面动态倒计时的代码: 1. 定义一个 CountDown() 函数计算 天.时.分.秒: 2. 使用 setInterval 对 CountDown() 函数 ...
- Javascript实现倒计时(计时器)
用js 实现倒计时功能,详细代码,及讲解如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head>&l ...
- javascript重置(base层)(。。。。不完整)
1.nextSibling浏览器兼容问题 <ul><li id="item1"></li><li id="item2" ...
- js点击重置按钮重置表单
<html> <head> <script type="text/javascript"> function formReset() { doc ...
最新文章
- C++中extern C的使用
- 【PHPExcel】生成Excel文件
- pythonos模块介绍_Python os模块介绍
- 关于 Group 的另一个函数
- vscode php debug
- java ftp 大文件_用Java实现FTP批量大文件上传下载(二)
- phpmyadmin在nginx环境下配置错误
- [LeetCode] Plus One 加一运算
- 如何使用内联onclick属性停止事件传播?
- H3C交换机创建ssh用户登录和设置aux密码
- Hadoop集群的搭建(结束)——修改hadoop配置文件以及启动集群服务
- maya为什么不能导出fbx_maya从 Maya 导出为 FBX 文件,MAYA
- (Demo3D 学习笔记)案例2:飞板传输货物,并按指定货位上架
- SAP 中英文转换-英转中
- CAD命令输入、结束、重复、撤销
- JQuery仿百度有啊人气排行特效演示
- 显卡内存和计算机内存,显存和内存的关系和区别
- 互联网公司发送短信为什么通过第三方短信平台,而不是通过运营商。
- webApp开发-等额本息试算
- 杨振宁追求的物理美学,居然在这里实现,物理学史上颜值最高的组合,看完后跪了……
热门文章
- MarkDown简单语法入门
- docker-compose使用
- centos - 查看程序运行状态、后台运行程序、回调后台程序、监控(tomcat和java程序为例)
- 一个基于Flask框架做的仿QQ邮箱系统(收发邮件、贝叶斯模型训练、垃圾邮件过滤、个性化标签)
- 审美能力很差能学习UI设计吗?
- gdb 调试core文件
- 华为云服务器是什么操作系统,云服务器操作系统是什么系统
- [unity3d][通过代码]改变材质球颜色,动态改变材质球颜色,动态改变模型颜色
- unity水上小船晃动物理效果
- mysql-slave(主从)