Javascript/Jquery——簡單定時器的多種實(shí)現(xiàn)方法
更新時間:2013年07月03日 14:53:37 作者:
本文為大家詳細(xì)介紹下使用Javascript/Jquery實(shí)現(xiàn)簡單的定時器,方法有多種,大家可以根據(jù)自己的喜好自由選擇,希望對大家有所幫助
第一種方法:
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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間歇調(diào)用 (不建議使用該方法)
$(function(){
setInterval(function(){
$("#currentTime").text(new Date().toLocaleString());
},1000);
});
</script>
</head>
<body>
<div id="currentTime"></div>
</body>
</html>
第二種方法:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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超時調(diào)用
function startTime(){
$("#currentTime").text(new Date().toLocaleString());
setTimeout('startTime()',1000);
}
</script>
</head>
<body onload="startTime()">
<div id="currentTime"></div>
</body>
</html>
第三種方法:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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>
復(fù)制代碼 代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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間歇調(diào)用 (不建議使用該方法)
$(function(){
setInterval(function(){
$("#currentTime").text(new Date().toLocaleString());
},1000);
});
</script>
</head>
<body>
<div id="currentTime"></div>
</body>
</html>
第二種方法:
復(fù)制代碼 代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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超時調(diào)用
function startTime(){
$("#currentTime").text(new Date().toLocaleString());
setTimeout('startTime()',1000);
}
</script>
</head>
<body onload="startTime()">
<div id="currentTime"></div>
</body>
</html>
第三種方法:
復(fù)制代碼 代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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>
您可能感興趣的文章:
- JavaScript暫停和繼續(xù)定時器的實(shí)現(xiàn)方法
- javascript中SetInterval與setTimeout的定時器用法
- JavaScript 定時器 SetTimeout之定時刷新窗口和關(guān)閉窗口(代碼超簡單)
- JS定時器使用,定時定點(diǎn),固定時刻,循環(huán)執(zhí)行詳解
- js定時器實(shí)現(xiàn)倒計時效果
- Javascript 定時器調(diào)用傳遞參數(shù)的方法
- javascript定時器取消定時器及優(yōu)化方法
- js定時器+簡單的動畫效果實(shí)例
- JS動畫定時器知識總結(jié)
- JS Canvas定時器模擬動態(tài)加載動畫
- javascript基于定時器實(shí)現(xiàn)進(jìn)度條功能實(shí)例
- javascript定時器的簡單應(yīng)用示例【控制方塊移動】
相關(guān)文章
JavaScript檢測瀏覽器是否支持CSS變量代碼實(shí)例
這篇文章主要介紹了JavaScript檢測瀏覽器是否支持CSS變量代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-03-03js實(shí)現(xiàn)for循環(huán)跳過undefined值示例
這篇文章主要介紹了js實(shí)現(xiàn)for循環(huán)跳過undefined值,結(jié)合實(shí)例形式分析了js使用for循環(huán)針對數(shù)組的遍歷、判斷、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07動態(tài)創(chuàng)建按鈕的JavaScript代碼
本文給大家分享一段JS實(shí)例代碼介紹動態(tài)創(chuàng)建按鈕的方法,需要的朋友參考下本文2016-01-01JavaScript實(shí)現(xiàn)信用卡校驗(yàn)方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)信用卡校驗(yàn)方法,涉及javascript使用Luhn算法進(jìn)行校驗(yàn)的技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-04-04javascript利用控件對windows的操作實(shí)現(xiàn)原理與應(yīng)用
假如要發(fā)送漢字的聊天框的內(nèi)容的話,我們也要從windows消息機(jī)制下手,先找到聊天消息的句柄(可以利用findwindow函數(shù)或者用spy工具哈),然后在找到上面的聊天框的句柄,接著我們就可以想這個句柄發(fā)送WM_SETTEXT的消息了2012-12-12企業(yè)微信掃碼登錄網(wǎng)頁功能實(shí)現(xiàn)代碼
這篇文章主要介紹了企業(yè)微信掃碼登錄網(wǎng)頁功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-01-01layui獲取選中行數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇layui獲取選中行數(shù)據(jù)的實(shí)例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08