<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>now test</title>
<script>
function myFunction(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2秒"},2000);
var t2=setTimeout(function(){x.value="4秒"},4000);
var t3=setTimeout(function (){x.value="6秒"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间！" onclick="myFunction()"/>
<input type="text" id="txt"/>
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>
</html>
3時限イベントの無限のサイクルで
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>now test</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer(){
if(!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计数！" onclick="doTimer()"/>
<input type="text" id="txt"/>
</form>
<p>点击上面的按钮，输入框将从0开始计数。</p>
</body>
</html>
4時限イベントでストップボタンで無限ループ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>now test</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer(){
if(!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount(){
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计数！" onclick="doTimer()"/>
<input type="text" id="txt"/>
<input type="button" value="停止计数！" onclick="stopCount()"/>
</form>
<p>点击上面的按钮，输入框将从0开始计数。</p>
</body>
</html>
時限イベントを使用して5には、時計を作りました
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>now test</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
if (i<10){
i="0"+1;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
図6に示すように、オブジェクトのインスタンスを作成します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>now test</title>
<script>
person={firstname:"John",lastname:"DOE",age:50,eyecolor:"blue"}
document.write(person.firstname+" is "+person.age+" years old .")
</script>
</head>
<body></body>
</html>
7、オブジェクト用のテンプレートを作成します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>now test</title>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","DOE",50,"blue");
document.write(myFather.firstname+" is "+myFather.age+" years old .")
</script>
</head>
<body></body>
</html>