js计时事件

JavaScript 计时事件

通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert(‘5 seconds!‘)",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示:1000 毫秒等于一秒。

实例

当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert(‘5 seconds!‘)",5000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

实例 - 无穷循环

要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从 0 开始计数。

<html>

<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById(‘txt‘).value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>

</html>

clearTimeout()

语法

clearTimeout(setTimeout_variable)

实例

下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器:

<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
 {
 document.getElementById(‘txt‘).value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }

function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>

</html>
时间: 2024-11-07 15:33:42

js计时事件的相关文章

js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环中的同步任务,异步任务: 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数. 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推

js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码代码如下: <a href="http://www.baidu.com" target="_bl

Js 冒泡事件阻止

原文:Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:$(document).ready(function

用js onselectstart事件鼠标禁止选中文字

IE&&Chrome中适用此方法 document.onselectstart=function(){return false;} onselectstart是防止内容被选中默认状态是true <body onselectstart=return(event.srcElement.type=='text')> 选不中 <input type="text" name="" value="来选吧"> </

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事

原生js阻止事件冒泡代码实例

原生js阻止事件冒泡代码实例:关于什么是事件冒泡这里就不多介绍了,可以参阅javascript事件冒泡简单介绍一章节,任何现象都是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便,下面就通过带来实例介绍一下如何阻止事件冒泡现象.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conte

JS之事件监听

一 如果事件监听类似于如下写法,则最终只会执行最后一个事件监听,其他监听都会被覆盖掉. window.onload=funtion(){console.log(1);}; window.onload=funtion(){console.log(2);}; window.onload=funtion(){console.log(3);}; //最终只会输出:"3" 二 如果事件监听类似于如下写法,则每个事件监听都会被执行,其他监听都不会被覆盖掉. --是否冒泡或捕获都不会影响输出结果的次

JS常见事件以及函数

1.js enter键激发事件 document.onkeydown = function (e) {            if (!e) e = window.event;            if ((e.keyCode || e.which) == 13) {                $("#btnSubmit").click();            }        } 2. JS常见事件以及函数