欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2024-02-08 14:49:52
本文为大家详细介绍下使用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>

上一篇： realme X2 Pro正式发布：骁龙855Plus+50W超级闪充

下一篇： jQuery学习大总结(三)jQuery操作元素属性 博客分类： jQuery jquery 

推荐阅读