在网页上实现自动计时
<script>
x=0
y=-1
function countMin( )
{ y=y+1
document.displayMin.displayBox.value=y
setTimeout("countMin( )",60000)
}
Function countSec( )
{ x=x+1
z =x%60
document.displaySec.displayBox.value=z
setTimeout("countSec( )", 1000)
}
<table> 你在本网页中驻足的时间是:
<td> <form name=displayMin>
<input type="text" name="displayBox" value="0" size=4 >
</form></td>
<td>分</td>
<td> <form name=displaySec> </td>
<td> <input type="text" name="displayBox" value="0" size=4 >
</form> </td>
<td> 秒</td> </tr> </table>
<script>
countMin( )
countSec( )
</script>
这个网页是两个function,一个用来计分,一个用来计秒,这只是计时的一种方式,但是这种方式计时很不准确,z=x%60 表示先进行x/60,得出的余数作为z的值, 例如82秒, modulus就是22, 所以文字框会显示22而不是82。若你要將单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:
functioncountSec( )
{x=x+1
z=x%60
if (z < 10){z= "0"+z}
document.displaySec.displayBox.value=z
setTimeout("countSec( )",1000)
}
需要断续进行计数的时:就会设计到另一个方法:clearTimeout(timeoutID)
这里的timeoutID就是给setTimeout设定的变量名。
例如:
meter1=setTimeout("count1( )", 1000)
<input type="text" name="box1" value="0" size=4 >
<input type=button value="停止计数" onClick="clearTimeout(meter1) " >
<input type=button value="继续计数" onClick="count1( ) " >
这个方法有很大的不足啊!为什么呢?
但你点击按钮时,多点几次,发现数据结果不准确……
这时:你可以用一个flag来标记,
<script>
x=0
flag=0
function count()
{x=x+1
document.display.box.value =x
timeoutID=setTimeout("count( )", 1000)
flag=1
}
Function restart( )
{if (flag==0)
{count( )}
}
</script></head>
<input type="text" name="box" value="0" size=4 >
<input type=button value="停止计时"
onClick="clearTimeout(timeoutID); flag=0 " >
<input type=button value="继续计时" onClick="restart()" >
这样子就可以解决上面的问题了……
分享到:
相关推荐
实现倒计时跳转,
用JS实现网页上的自动跳转功能,倒计时跳转至指定网页,倒计时间可自设,时间到则自动跳转到指定的网址,对于JS来说,实现该似乎挺简单哦,用IIS上的301也可实现跳转,以及mete标签也可以实现自动跳转,根据你自己的...
用js实现根据不同情况自动设置,结束时间的网页倒计时代码程序。
js实现网页自动跳转倒计时!html新手必备!html新手必备!html新手必备!html新手必备!
主要介绍了通过js实现的网页自动刷新,利用此功能可制作节日倒计时效果,需要的朋友可以参考下
主要介绍了javascript实现倒计时N秒后网页自动跳转代码,非常的实用,这里推荐给大家。
运行本实例,访问准备考试页面index.jsp,在该页面中,单击“开始考试”按钮,将打开新窗口显示开始考试的页面,如图10.1所示,页面会自动计时,当考试时间结束时,将自动提价试卷。 2.技术要点 主要是利用Ajax...
1.19 在网页中动态添加Script脚本.htm 1.20 用JavaScript随机修改页面的标题.htm 1.21 判断网页加载完毕.htm 1.22 嵌入网页的播放器.htm 1.23 设置指定网页为主页.htm 1.24 使用JavaScript传递页面参数.htm ...
html5新技术实现网页画一个钟表,主要也是利用canvas对象实现之
倒计时器: 编写 JavaScript 代码实现一个简单的倒计时器,用于显示网页上的倒计时效果。 TODO 列表: 使用 JavaScript 实现一个简单的 TODO 列表,用户可以添加、删除和编辑任务。 JavaScript 作为一种前端开发的...
JS点击按钮自动倒计时代码,示例一:要求用户阅读完条款内容才能激活按钮;示例二:要求用户激活短信通道向用户手机发送验证码。
实现一个简单的点名系统(无需使用第三方插件),需求分析:两个按钮实现随机点名的开始和结束,增加倒计时功能(开始后,可手动点击停止,不然程序将在10秒后自动停止)。
实例298 在ASP中利用Word自动打印指定格式的会议记录 470 实例299 在PHP中调用Word自动打印指定格式的会议记录 472 11.3 利用Excel打印报表 474 实例300 将Web页面中的数据导出到Excel 474 实例301 将Web页面中的...
最近做一个简单的设置网页,因为需要重启设备功能,于是就想在上面加一个倒计时弹窗的界面。 刚开始的想法是自定义一个alert弹窗,但很快就发现,alert会一直停在那里等待点击确认,而不是我想要的那种自动连续显示...
实现动态京包括轮播图,自动轮播,倒计时(秒杀模块),点击切换等功能
1.制作测试网页 首先我们来做一个简易的抢购页面 <!DOCTYPE html> <html lang=zh_CN> <head> <meta charset=UTF-8> <title>Apple</title> <style type=text/css> body ...
我们先来看下秒杀活动页面代码 <!DOCTYPE HTML> <html> <head>... 活动倒计时<strong id=endtime></strong>秒! <input type=button id=btn value=立即购买 disabled=disabled onC