当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Javascript/Jquery——简单定时器的多种实现方法

Javascript/Jquery——简单定时器的多种实现方法

2019年03月25日  | 移动技术网IT编程  | 我要评论
本文为大家详细介绍下使用javascript/jquery实现简单的定时器,方法有多种,大家可以根据自己的喜好自由选择,希望对大家有所帮助   第一种方法: 复制代码

本文为大家详细介绍下使用javascript/jquery实现简单的定时器,方法有多种,大家可以根据自己的喜好自由选择,希望对大家有所帮助  

第一种方法:

复制代码 代码如下:
<%@ page language="java" contenttype="text/html; charset=utf-8"pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>定时器</title>
<script language="javascript" src="jquery-1.4.2.js"></script>
<script language="javascript">
//使用setinterval间歇调用 (不建议使用该方法)
$(function(){
setinterval(function(){
$("#currenttime").text(new date().tolocalestring());
},1000);
});
</script>
</head>
<body>
<p id="currenttime"></p>
</body>
</html>


第二种方法:

复制代码 代码如下:
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<head>
<title>定时器</title>
<script language="javascript" src="jquery-1.4.2.js"></script>
<script language="javascript">
//使用settimeout超时调用
function starttime(){
$("#currenttime").text(new date().tolocalestring());
settimeout('starttime()',1000);
}
</script>
</head>
<body onload="starttime()">
<p id="currenttime"></p>
</body>
</html>


第三种方法:

复制代码 代码如下:


<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<head>
<title>定时器</title>
<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="开始计时!" onclick="timedcount()"/>
<input type="text" id="txt"/>
<input type="button" value="停止计时!" onclick="stopcount()"/>
</form>
</body>
</html>

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网