JavaScript高级实例集合

IT业界
2025-08-19 19:39:01

文章目录 JavaScript 高级实例集合创建一个欢迎 cookie简单的计时另一个简单的计时在一个无穷循环中的计时事件带有停止按钮的无穷循环中的计时事件使用计时事件制作的钟表创建对象的实例创建用于对象的模板

JavaScript 高级实例集合

创建一个欢迎 cookie 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> </head> <head> <script> function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(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("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user!="" && user!=null){ setCookie("username",user,30); } } } </script> </head> <body onload="checkCookie()"></body> </html> 运行效果简单的计时源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> </head> <body> <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ setTimeout(function(){alert("Hello")},3000); } </script> </body> </html> 运行效果另一个简单的计时源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> </head> <head> <script> function timedText(){ var x=document.getElementById('txt'); var t1=setTimeout(function(){x.value="2 seconds"},2000); var t2=setTimeout(function(){x.value="4 seconds"},4000); var t3=setTimeout(function(){x.value="6 seconds"},6000); } </script> </head> <body> <form> <input type="button" value="显示文本时间!" onclick="timedText()" /> <input type="text" id="txt" /> </form> <p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p> </body> </html> 运行效果在一个无穷循环中的计时事件源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</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> 运行效果带有停止按钮的无穷循环中的计时事件源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> <script> var c=0; var t; var timer_is_on=0; function timedCount(){ document.getElementById('txt').value=c; c=c+1; t=setTimeout(function(){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> 运行效果使用计时事件制作的钟表源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> <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('txt').innerHTML=h+":"+m+":"+s; t=setTimeout(function(){startTime()},500); } function checkTime(i){ if (i<10){ i="0" + i; } return i; } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html> 运行效果创建对象的实例源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> </head> <body> <script> person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"} document.write(person.firstname + " is " + person.age + " years old."); </script> </body> </html> 运行效果创建用于对象的模板源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梁辰兴实例</title> </head> <body> <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> </body> </html> 运行效果

标签：

JavaScript高级实例集合由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JavaScript高级实例集合”

上一篇
【CSS】快速入门笔记

下一篇
2023华为面试真题