您的位置:

关于javascript计时器详解的信息

本文目录一览:

用JS实现计时器功能

脚本说明:

第一步:把如下代码加入head区域中

SCRIPT language=javascript

!--

function generate(form){for(var q=0;q12;q++){if(document.me.m.options[document.me.m.selectedIndex].value==q){var m2=q+1

}var txt='!-- 分三步完成全部脚本:\r\n\r\n'

+' 1. 将第一部分粘贴到HTML的HEAD区\r\n'

+' 2. 将OnLoad事件加入BODY标签内\r\n'

+' 3. 将最后一部分代码加入BODY区 --\r\n\r\n'

+'!-- 第一步: 将如下代码粘贴到HTML的HEAD区--\r\n\r\n'

+'HEAD\r\n\r\nSCRIPT LANGUAGE="JavaScript"\r\n\r\n'

+'!-- Begin\r\n'

+'var Temp2;\n'

+'var timerID = null;\n'

+'var timerRunning = false;\n'

+'function arry() {\n'

+'this.length = 12;\n'

+'this[0] = 31;\n'

+'this[1] = 28;\n'

+'this[2] = 31;\n'

+'this[3] = 30;\n'

+'this[4] = 31;\n'

+'this[5] = 30;\n'

+'this[6] = 31;\n'

+'this[7] = 31;\n'

+'this[8] = 30;\n'

+'this[9] = 31;\n'

+'this[10] = 30;\n'

+'this[11] = 31;\n'

+'}\n'

+'var date = new arry();\n'

+'\n'

+'function stopclock() {\n'

+'if(timerRunning)\n'

+'clearTimeout(timerID);\n'

+'timerRunning = false;\n'

+'}\n'

+'\n'

+'function startclock() {\n'

+'stopclock();\n'

+'showtime();\n'

+'}\n'

+'\n'

+'function showtime() {\n'

+'now = new Date();\n'

+'var CurMonth = now.getMonth();\n'

+'var CurDate = now.getDate();\n'

+'var CurYear = now.getFullYear();\n'

+'now = null;\n'

+'if ('+document.me.d.options[document.me.d.selectedIndex].value+' CurDate) {\n'

+'CurDate -= date[CurMonth]; CurMonth++;\n'

+'}\n'

+'if ('+document.me.m.options[document.me.m.selectedIndex].value+' CurMonth) {\n'

+'CurMonth -= 12; CurYear++;\n'

+'}\n'

+'\n'

+'var Yearleft = '+document.me.y.options[document.me.y.selectedIndex].value+' - CurYear;\n'

+'var Monthleft = '+document.me.m.options[document.me.m.selectedIndex].value+' - CurMonth;\n'

+'var Dateleft = '+document.me.d.options[document.me.d.selectedIndex].value+' - CurDate;\n'

+'\n'

+'document.dateform.a.value = Yearleft;\n'

+'document.dateform.b.value = Monthleft;\n'

+'document.dateform.c.value = Dateleft;\n'

+'\n'

+'timerID = setTimeout("showtime()",1000);\n'

+'timerRunning = true;\n'

+'}\n'

+'/\/ End --\r\n\/script\r\n'

+'\/H'+'EAD\r\n\r\n'

+'!-- 第二步:将OnLoad事件加入BODY标签内 --\r\n\r\n'

+'BO'+'DY Onload="startclock()"\r\n\r\n'

+'!-- 第三步:将最后一部分代码加入BODY区 --\r\n\r\n'

+'form name=dateform距离'

+m2+'/'+document.me.d.options[document.me.d.selectedIndex].value+'/'

+document.me.y.options[document.me.y.selectedIndex].value

+'还有\n'

+'input type=text name=a size=2 value=""年\n'

+'input type=text name=b size=2 value=""月\n'

+'input type=text name=c size=2 value=""天\n'

+'/fo'+'rm\r\n\r\n'

+''+'!-- 代码长度: 1.95 KB --'+''

;}document.mail.source.value=txt;document.mail.source2.value=txt;}

//--

/SCRIPT

第二步:把如下代码加入区域中:

center

table border=5 bordercolor=blue borderlight=green

trtd align=centerfont size=5 color=red face="Arial, Helvetica, sans-serif"strong下面框中为脚本显示区/strong/font/td/tr

trtd align=centerform name=me pselect name=m size=1 option value=0January /option option value=1February /option option value=2March /option option value=3April /option option value=4May /option option value=5June /option option value=6July /option option value=7August /option option value=8September /option option value=9October /option option value=10November /option option value=11December /option /select select name=d size=1 option value=11 /option option value=22 /option option value=33 /option option value=44 /option option value=55 /option option value=66 /option option value=77 /option option value=88 /option option value=99 /option option value=1010 /option option value=1111 /option option value=1212 /option option value=1313 /option option value=1414 /option option value=1515 /option option value=1616 /option option value=1717 /option option value=1818 /option option value=1919 /option option value=2020 /option option value=2121 /option option value=2222 /option option value=2323 /option option value=2424 /option option value=2525 /option option value=2626 /option option value=2727 /option option value=2828 /option option value=2929 /option option value=3030 /option option value=3131 /option /selectselect name=y size=1 option value=19991999 /option option value=20002000 /option option value=20012001 /option option value=20022002 /option option value=20032003 /option option value=20042004 /option option value=20052005 /option option value=20062006 /option option value=20072007 /option option value=20082008 /option option value=20092009 /option /selectbr input type=button onclick=generate() value=生成代码 class=yk9input type=button value=返回 onClick=history.go(-1) name=button class=yk9p/p/formform name=mail input type=hidden name=scriptname value="Countdown Creator"input type=hidden name=source2 valuetable bgcolor=dedfdf border=1 cellpadding=1 width=396 tr td align=center height=218textarea name=source rows=12 cols=55 class=yk9/textareabr br /td td /td /tr /table/form/td/tr/table

怎样用javascript做一个计时器

计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器.

计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面.

那现在我们来完成这个界面

label计时:/label

input type="text" name="" id="timer"/

button onclick="pause(this)" id="pause" state="on"暂停/button

button onclick="restart()"重新开始/button

给标签元素一个ID是为了获取其中的标签, 然后加入了两个点击事件, 计数器的暂停, 和重新开始事件.

首先我们来完成开始计时的处理, 开始计时主要还是是用了setInterval的方法, 其中每隔1秒执行一次方法,

这样我们就可以对时间做处理, 就像开头所说60秒等于1分钟..., 所以这里就需要用判断来处理, 最后就将其中的得到的秒,分,时显示到输入框里.

var ele_timer = document.getElementById("timer");

var n_sec = 0; //秒

var n_min = 0; //分

var n_hour = 0; //时

//60秒 === 1分

//60分 === 1小时

function timer() {

return setInterval(function () {

var str_sec = n_sec;

var str_min = n_min;

var str_hour = n_hour;

if ( n_sec 10) {

str_sec = "0" + n_sec;

}

if ( n_min 10 ) {

str_min = "0" + n_min;

}

if ( n_hour 10 ) {

str_hour = "0" + n_hour;

}

var time = str_hour + ":" + str_min + ":" + str_sec;

ele_timer.value = time;

n_sec++;

if (n_sec 59){

n_sec = 0;

n_min++;

}

if (n_min 59) {

n_sec = 0;

n_hour++;

}

}, 1000);

}

var n_timer = timer();

我们用timer方法包装setInterval方法是为了,后面暂停和重新开始做处理.

用户点击了暂停, 计时器就停止计时, 用户继续点击这个按钮, 计时器继续计时. 所以这里有一个状态需要控制,这个状态我们给这个按钮一个属性.

//暂停和继续

function pause(self) {

var state = self.getAttribute("state");

if (state === "on") {

clearInterval(n_timer);

self.textContent = "继续";

self.setAttribute("state", "off");

} else {

n_timer = timer();

self.textContent = "暂停";

self.setAttribute("state", "on");

}

}

最后我们来看一下重新开始, 重新开始事件就更加简单了. 将计数器清0, 然后改变暂停按钮初始状态.

function restart() {

clearInterval(n_timer);

n_sec = 0;

n_min = 0;

n_hour = 0;

n_timer = timer();

var ele_pause = document.getElementById("pause");

ele_pause.textContent = "暂停";

ele_pause.setAttribute("state", "on");

}

这样就完成了计时的功能.效果如下

javascript计时器何时关闭

你用的是什么计时器?

setTimeout("function",time) 还是 setInterval("function",time)

参数是一样的,function是方法名,time是执行间隔的毫秒数

这2个都是计时用的

SetInterval会重复执行,setTimeout不会重复只执行一次。

如果要停止需要执行clearTimeout(对象) 清除已设置的setTimeout对象,clearInterval(对象) 清除已设置的setInterval对象。

用法大概如下:

var objTimout=window.setTimeout(function,5000);//5000毫秒=5秒,5秒后执行function方法,然后退出

window.clearTimeout(objTimout);//清除setTimeout设置的时间

或者

var objInterval=window.setInterval(function,5000);//每5秒执行一次function方法

window.clearInterval(objInterval);//清除setInterval对象设置的时间

希望能帮到你!

js中计时器返回数值

JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。

JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件。

主要通过两个方法来实现:

1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

2.setTimeout() - 暂停指定的毫秒数后执行指定的代码

并且,这两个方法都是window对象的方法。

首先,介绍setInterval()方法,该方法值得是间隔一定的毫秒数不停的执行指定的代码。

语法:window.setInterval(”js代码,函数等“,毫秒数);

实例1:每三秒弹出一个hello

setInterval(function(){alert("Hello")},3000);

实例2:显示当前时间,通过按钮实现时间的停止,开始

script type="text/javascript"

var myVar;

function startTimer(){

/*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/

myVar=setInterval(function(){myTimer()},1000);

}

function myTimer()/* 定义一个得到本地时间的函数*/

{

var d=new Date();

var t=d.toLocaleTimeString();

document.getElementById("demo").innerHTML=t;

}

function stopTimer()

{/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/

clearInterval(myVar);

}

/script

setTimeout() 方法

在html或jsp中

body

h4 id="demo"/h4

input type="button" onclick="startTimer()" value="开始"

input type="button" onclick="stopTimer()" value="停止"

/body

对于setTimeout()方法,指的是指定的毫秒数后执行指定的代码或方法。

语法:window.setTimeout("javascript 函数",毫秒数);

实例1:3秒钟后弹出”hello“提示框

setTimeout(function(){alert("Hello")},3000);

实例2:三秒钟后跳转到前一个页面

script type="text/javascript"

setTimeout(function(){

window.history.back();

},3000);

/script

如何执行停止呢?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下:

var myVar;

function myFunction()

{

myVar=setTimeout(function(){alert("Hello")},3000);

}

function myStopFunction()

{

clearTimeout(myVar);

}

以上就把js计时器的基本功能简要介绍了,具体的使用场景,想要深刻理解,只有到项目用到时方可有新的理会。

关于java学习笔记良葛格的信息

2022-11-11
关于已前的学习笔记java的信息

2022-11-18
发篇java复习笔记(java课程笔记)

2022-11-09
关于java基础知识笔记1的信息

2022-11-20
关于javascript计时器详解的信息

2022-11-19
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
关于java性能的小笔记(java代码性能分析)

2022-11-12
关于python学习第四次笔记的信息

2022-11-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
javascript入门笔记1的简单介绍

2022-11-18
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
关于python学习笔记十三的信息

2022-11-19
java学习的一些基础笔记(java初学笔记)

2022-11-14
关于java864的信息

2023-01-05
关于javascript教程的信息

2022-11-13
关于javascript和jsonxml的信息

本文目录一览: 1、如何在JS中实现相互转换XML和JSON 2、javascript 将xml转换为json对象 3、用javascript将json转化成xml,具体json,xml如下 4、js

2023-12-08
关于java864位的信息

2022-11-08
关于java获取eth余额的信息

2022-11-18
java学习笔记(java初学笔记)

2022-11-14
关于javajsptomcatmysql的信息

本文目录一览: 1、如何在服务器上配置JSP,jsp的服务器到底怎么配置啊? 2、jsp 跟tomcat和mysql有什么联系,怎么用?越详细越好!谢谢 3、怎么用jsp连接mysql数据库 4、如何

2023-12-08