本文目录一览：
- 1、用javascript写一个计时器程序，有启动暂停和复位
- 2、怎样用javascript做一个计时器
- 3、JavaScript怎样实现打开页面自动开始倒计时？？
- 4、JavaScript 简单 计时器运用，实现电子时钟自动走动的效果，按钮控制启止？
- 5、用JS实现计时器功能
- 6、JavaScript定时器取消后怎样重新启动？？
用javascript写一个计时器程序，有启动暂停和复位
#html:
input type="button" value="启动" id="btnStart" /
input type="button" value="复位" id="btnReset" /
label id="lblTime"0:0:0:0/label
#javascript:
window.onload = function () {
var start = document.getElementById("btnStart");
var reset = document.getElementById("btnReset");
var time = document.getElementById("lblTime");
var h = 0, m = 0, s = 0, ms = 0, t;
//开始计时
start.onclick = function () {
bvalue = start.value;
if (bvalue == "启动") {
t = window.setInterval(function () {
if (ms == 100) {
s += 1;
ms = 0;
}
if (s == 60) {
m += 1;
s = 0;
}
if (m == 60) {
h += 1;
m = 0;
}
time.textContent = h + ":" + m + ":" + s + ":" + ms;
ms++;
}, 10);
start.value = "暂停";
}
else {
window.clearInterval(t);
start.value = "启动";
}
}
//复位
reset.onclick = function () {
window.clearInterval(t);
time.textContent = 0 + ":" + 0 + ":" + 0 + ":" + 0;
}
}
怎样用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怎样实现打开页面自动开始倒计时？？
html
head
meta http-equiv="Content-Type" content="text/html" charset="gb2312" /
titlejavascript实现的倒计时时钟/title
script language="javascript"
window.onload = function ()
{
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null;
aInput.onclick = function ()
{
this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' ? "cancel" : '';
};
function format(a)
{
return a.toString().replace(/^(\d)$/,'0$1');
}
function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName("span");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain = 0)
{
clearInterval(timer);
return;
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
// 加上此句即可。
aInput.click();
}
/script
/head
body
div align="center" id="countdown"
span02/span分钟span00/span秒
br
input type="button" value="开始" /
/div
/body
/html
JavaScript 简单 计时器运用，实现电子时钟自动走动的效果，按钮控制启止？
htmlheadscript type="text/javascript"function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)} function checkTime(i){if (i10) {i="0" + i} return i}/script/head body onload="startTime()"div id="txt"/div/body/html
用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定时器取消后怎样重新启动？？
首先给函数个名字
t=setInterval(function self(){
然後
aImg[n].onmouseout=function(){
t=setInterval(self,500)
};
当然你也可以使用arguments.callee, 或者以下写法
function action()
{
...
t=setInterval(action,500)
...
}
t=setInterval(action,500)
总而言之都是要获取到函数本身
