Web开发代码:简单的计时、另一个简单的计时、在一个无穷循环中的计时事件、使用计时事件制作的钟表、创建对象的实例、创建用于对象的模板

最新推荐文章于 2024-05-11 19:06:41 发布

hahahafree

最新推荐文章于 2024-05-11 19:06:41 发布

阅读量320

点赞数

分类专栏： Web JavaScript 文章标签： web

本文链接：https://blog.csdn.net/weixin_43731793/article/details/94297188

版权

Web 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

1、简单的计时

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>now test</title> 
<script>
	function myFunction(){
		setTimeout(function(){alert("Hello")},3000);
	}
	
	</script>
</head>
<body>
<button  onclick="myFunction()">点我</button>
</body>
</html>

2、另一个简单的计时

<!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>

hahahafree

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web开发代码:简单的计时、另一个简单的计时、在一个无穷循环中的计时事件、使用计时事件制作的钟表、创建对象的实例、创建用于对象的模板

1、简单的计时<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>now test</title> <script> function myFunction(){ setTimeout(function(){alert("Hello"...
复制链接

扫一扫