1、在桌机上新建文本文档,命名为晓博JavaScript特效测试.txt,在文本文档里中入HTML文档的基本元素如下,并保存。<html><head><title媪青怍牙>晓博JavaScript特效测试</title></head><body><div id="zy"> <div id="login"></div> <div id="daohang"> <ul> <li><a href="index.html">首页</a></li> <li><a href="jianjie.html">七夕简介</a></li> <li><a href="#">七夕节传说</a></li> <li><a href="#">七夕节习俗</a></li> <li><a href="#">诗词& 歌谣</a></li> <li><a href="#">七夕节寄语</a></li> </ul> </div></div></body></html>
2、第一步:把如下代码加入<head>区域中<script Language屏顿幂垂="JavaScript媪青怍牙"><!-- Helpers for JSI page...// Navigation - Startfunction goback(){alert("Good Bye!");history.go(-1);}function getname(str) { alert("Hi, "+ str+"!");}function gettheDate() {stopclock();Todays = new Date();TheDate = "" + (Todays.getMonth()+ 1) +" / "+ Todays.getDate() + " / " +Todays.getYear()document.clock.face.value = TheDate;}function showit () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); stopclock(); TotalTime = (minutes > GetTotal)? (minutes-GetTotal):TotalTime; document.clock.face.value = TotalTime + " in minutes ";}// Navigation - Stop// Netscapes Clock - Start// this code was taken from Netscapes JavaScript documentation at// www.netscape.com on Jan.25.96var timerID = null;var TotalTime = 0;var GetTotal = 0;var timerRunning = false;function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false;}function startclock () { // Make sure the clock is stopped var now = new Date(); stopclock(); GetTotal=now.getMinutes(); gettheDate() showtime();}function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true;}function showtimer () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.Tspent.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true;}// Netscapes Clock - Stop// end Helpers --></script>
3、第二步:把如下代码加入<body>区域中<form name="clock" onSubmit="0"> <input type=button value="Time" size=12 onClick="showtime()"> <input type=button value="Date" size=12 onClick="gettheDate()"> <input type="text" name="face" size=12 value="" StartTimer()></form>
4、第三步:把<body>区中内容改为如下,并重名文档为HTML文件<body bgcolor="#fef4d9" onLoad="startclock()">
5、用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到时间日期转换特效,如下图