`
FireFlyWithCat
  • 浏览: 88424 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在网页上实现自动计时

    博客分类:
  • html
阅读更多
在网页上实现自动计时
<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()" >

这样子就可以解决上面的问题了……
3
0
分享到:
评论

相关推荐

    js实现的倒计时定时自动关机源码

    在这个场景中,我们讨论的是使用JavaScript实现的倒计时定时自动关机功能。这个功能允许用户设置一个时间,当倒计时结束时,计算机将自动关闭。以下是关于这个主题的详细知识点: 1. **JavaScript事件循环**: ...

    JS实现自动倒计时30秒后按钮才可用

    在网页交互设计中,有时我们需要实现一种功能:用户在点击某个按钮执行特定操作前,必须等待一段时间,例如30秒。这种设计可以防止用户频繁触发同一操作,避免系统资源的过度消耗,提升用户体验。本话题将详细介绍...

    实现倒计时跳转

    实现倒计时跳转,

    JS点击按钮自动倒计时代码.zip

    在JavaScript编程中,点击按钮自动倒计时是一种常见的交互设计,用于提高用户体验并实现特定功能。例如,确保用户阅读完条款内容或者等待短信验证码的发送。在这个名为"JS点击按钮自动倒计时代码.zip"的压缩包中,...

    jquery 自动倒计时

    本文将深入探讨如何使用 jQuery 实现自动倒计时功能,并在倒计时结束后自动执行 JavaScript 方法。 首先,我们需要理解倒计时的基本原理。倒计时通常涉及到时间的计算,即从一个特定的结束时间点开始,逐步减少到零...

    实现倒计时,重新倒计时

    - **前端实现**:JavaScript是最常用的前端实现倒计时的技术,可以使用`setInterval()`函数每隔一定时间更新页面上的时间显示。例如,你可以创建一个`Date`对象表示目标时间,然后计算与当前时间的差值,不断更新这...

    vb实现的计时器程序

    在这个"vb实现的计时器程序"中,我们可以了解到如何利用VB的基本语法和计时器组件来创建一个简单的计时器应用。下面将详细介绍VB计时器控件的工作原理、基本用法以及可能的应用场景。 1. 计时器控件介绍: VB中的...

    100行Html5+CSS3+JS代码实现元旦倒计时界面

    可以使用`setInterval`函数每秒或每毫秒更新计时器,然后更新DOM元素上的文本内容。 此外,根据需求,我们可以自定义更多的功能,比如更换背景图片。只需在CSS中找到引用背景图片的规则,如`background-image`,...

    基于JavaScript实现网页倒计时自动跳转代码

    用JS实现网页上的自动跳转功能,倒计时跳转至指定网页,倒计时间可自设,时间到则自动跳转到指定的网址,对于JS来说,实现该似乎挺简单哦,用IIS上的301也可实现跳转,以及mete标签也可以实现自动跳转,根据你自己的...

    js实现网页自动刷新可制作节日倒计时效果

    `使浏览器重新加载当前页面,实现自动刷新的效果。 要制作节日倒计时效果,我们可以在页面上显示一个倒计时的计数器,并用JavaScript来动态更新这个计数器的值。具体实现时,可以编写一个函数,该函数会获取当前...

    网页中的声音报警倒计时

    综上所述,实现“网页中的声音报警倒计时”功能需要结合HTML来构建用户界面,JavaScript来处理逻辑,以及可能的音频处理技术来播放声音。通过这样的组合,我们可以创建一个用户友好的交互式倒计时器,当时间到达零时...

    js可以自动设置结束时间的倒计时

    用js实现根据不同情况自动设置,结束时间的网页倒计时代码程序。

    Vue网页倒计时代码.zip

    在Vue网页倒计时代码.zip这个压缩包中,我们可以预见到包含了一个使用Vue.js实现的网页倒计时功能的示例。倒计时功能在网页应用中非常常见,比如用于活动倒计时、考试倒计时等场景。下面,我们将深入探讨Vue.js如何...

    倒计时十秒后跳转到其它页面源代码

    标题中的“倒计时十秒后跳转到其它页面源代码”是指一种常见的网页编程技术,用于在用户停留一定时间后自动重定向到其他页面。这种功能常用于广告页面、临时提示信息或需要用户确认的场景。下面我们将深入探讨这个...

    网页特效代码 精确到千分之一秒的计时器

    在网页开发中,为了实现更加丰富的用户交互体验,往往需要加入一些动态效果或者功能,比如计时器。本文将详细介绍一个精确到千分之一秒的计时器的实现方法。该计时器不仅能够提供高精度的时间显示,还可以支持启动、...

    HTML 5秒倒计时跳转指定网站源码.zip

    在这个"HTML 5秒倒计时跳转指定网站源码.zip"压缩包中,包含了一个简单的HTML页面,用于实现5秒倒计时后自动跳转到预设的网站。这个功能在很多场景下都很实用,比如作为404错误页面,引导用户前往正确的站点。 首先...

    网页上发送短信时验证码变灰倒计时显示

    在网页设计中,"网页上发送短信时验证码变灰倒计时显示" 是一个常见的功能,主要用于提升用户体验和防止恶意操作。这个功能通常出现在用户注册、登录或进行其他需要验证身份的操作时,确保手机号码的有效性和唯一性...

    js实现网页自动跳转

    js实现网页自动跳转倒计时!html新手必备!html新手必备!html新手必备!html新手必备!

    HTML5网页倒计时代码特效.zip

    总之,HTML5网页倒计时代码特效结合了HTML5的`&lt;time&gt;`元素和JavaScript的动态更新能力,为开发者提供了一种在网页上创建视觉吸引人且功能实用的倒计时工具。这种技术广泛应用于各种需要时间敏感提示的场景,如在线...

    网站施工倒计时响应式网页模板.zip

    这意味着无论用户使用何种设备(如桌面电脑、平板或手机)访问该页面,模板都能自动调整布局和样式,确保在各种屏幕尺寸上都能提供良好的浏览体验。这对于当前移动优先的互联网环境来说至关重要,因为它能够保证所有...

Global site tag (gtag.js) - Google Analytics