<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自动增长计时器</title>
<script type="text/javascript">
var atime;
function clock(){
var time=new Date();
atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value = atime;
}
setInterval(clock,1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" style="background:#000;color:#00ff00;width:55px"; />
</form>
</body>
</html>Effekt:
Aktuelle Zeit anzeigen, automatisch wachsen
Button-Timer hinzufügen (für Start und Pause)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()"/>
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>Effekt:
Klicken Sie auf die Startschaltfläche, um von 0 an zu zählen und jede Sekunde 1 hinzuzufügen. Klicken Sie auf die Schaltfläche, um den Vorgang zu stoppen und den aktuellen Status beizubehalten.
Zusammenfassung:
1. setInterval (Code, Interaktionszeit);
Parameter: Code: kann ein Funktionsname oder eine Code-Interaktionszeit sein: Legen Sie die Interaktion fest Zeit
clearInterval(id_from_setInterval);
Parameter: ID-Wert, der von setInterval() zurückgegeben wird.
2. setTimeout (Code, Verzögerungszeit);
Parameter: Code: Es kann ein Funktionsname oder eine Codezeichenfolge sein; clearTimeout (id_from_setTimeout) ;
Parameter: ID-Wert, der von setTimeout() zurückgegeben wird.
Das obige ist der detaillierte Inhalt vonImplementierung eines Javascript-Timers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
