JavaScript基础，来自“菜鸟教程”JavaScript实例练习【三】

最新推荐文章于 2022-07-11 07:35:00 发布

虾尾丸子

最新推荐文章于 2022-07-11 07:35:00 发布

阅读量207

点赞数

分类专栏：前端文章标签： JavaScript Cookie 计时器对象实例网页交互

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/117669917

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

叮！今日份更新，新鲜出炉～

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高级JavaScript实例</title>
		<script>
			function setCookie(cname,cvalue,exdays){
				var d = new Date();
				d.setTime(d.getTime()+(exdays*24*60*60*1000));//d.setTime(当前时间+附加时间)获取当前时间，单位是毫秒，exdays * 24 * 60 * 60 * 1000：附加多少天，换算成毫秒
				var expires = "expires"+d.toGMTString();
				document.cookie = cname+"=" + cvalue + ";" + expires;
			}
			function getCookie(cname){
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i=0;i<ca.length;i++){
					var c = ca[i].trim();
					if(c.indexOf(name)==0){
						return c.substring(name.length,c.length);
					}
				}
				return "";
			}
			function checkCookie(){
				var user=getCookie("username");
				if(user!=""){
					alert("欢迎 " + user + " 再次访问");
				}
				else{
					user = prompt("请输入你的名字：","");
					if(user!="" && user!=null){
						setCookie("username",user,0);//
					}
				}
			}	
		</script>
	</head>
	<body onload="startTime()">//fifth实例使用
	<!-- <body onload="checkCookie()"> -->//first实例使用
		<h1>first:cookie</h1>
		<h1>second:简单计时器</h1>
		<p>点击按钮，等待三秒后弹出“hello，world！”</p>
		<button onclick="myfunc02()">按钮</button>
		<script>
			function myfunc02(){
				setTimeout(function(){
					alert("Hello World!",3000);
				})
			}
		</script>
		<h1>third:另一个简单的计时器</h1>
		<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
		<script>
			function timedText(){
				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>
		<form>
			<input type="button" value="显示时间!" onclick="timedText()"/>
			<input type="text" id="txt" />
		</form>
		<h1>fourth：在一个无穷循环中的计时事件，加停止计时按钮</h1>
		<p>点击按钮，输入框将从0开始一直计数。</p>
		<script>
			var c=0;
			var t;
			var timer_is_on=0;
			function timedCount(){//计时器计数实现
				document.getElementById('txt4').value=c;
				c=c+1;
				t=setTimeout("timedCount()",1000);
			}
			function doTimer(){//计时器开关0，1
				if(!timer_is_on){
					timer_is_on=1;
					timedCount();
				}
			}
			function stopTimer(){
				clearTimeout(t);
				timer_is_on=0;
			}
		</script>
		<form>
			<input type="button" value="开始计数了!" onclick="doTimer()"/>
			<input type="text" id="txt4" />
			<input type="button" value="停止计时了" onclick="stopTimer()"/>
		</form>
		<h1>fifth:使用计时器事件做的钟表</h1>
		<script>
			function startTime(){
				var today = new Date();
				var h = today.getHours();
				var m = today.getMinutes();
				var s = today.getSeconds();//在小于10的数字前加一个‘0’
				m=checkTime(m);
				s=checkTime(s);
				document.getElementById('txt5').innerHTML=h+":"+m+":"+s;
				t=setTimeout(function(){startTime()},500);
			}
			function checkTime(i){
				if(i<10){
					i="0" + i;
				}
				return i;
			}
		</script>
		<div id="txt5"></div>
		<div id="txt5"></div>
		<h1>sixth:创建对象的实例</h1>
		<script>
			person={
				firstname:"John",
				lastname:"Doe",
				age:50,
				eyecolor:"blue"
			}
			document.write(person.firstname + " is " + person.age + " years old.");
		</script>
		<h1>创建用于对象的模版</h1>
		<script>
			function person2(firstname,lastname,age,eyecolor){
				this.firstname=firstname;
				this.lastname=lastname;
				this.age=age;
				this.eyecolor=eyecolor;
			}
			myfather=new person2("John","Doe",50,"blue");
			document.write(myfather.firstname + " is " + myfather.age + "years old.")
		</script>
		
	</body>
</html>