Javascript脚本特效示例:[33]时间日期转换
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>
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/d47cb624d8e9ccd2a78a60ed0e40102a05e2c943.jpg)
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/50189b40102a04e21f4e0bf62b7aa010bd33c243.jpg)
2、第一步:把如下代码加入<head>区域中
<script Language="JavaScript">
<!-- Helpers for JSI page...
// Navigation - Start
function 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.96
var 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文件,可以看到时间日期转换特效,如下图
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/a13bbe10bc33ec381357285b295f0c14c37b3c40.jpg)
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/a31e1214c27bd282ab6590f23cb1eef97ebd3640.jpg)
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/87c8bf46b7b1eef94e517dc8bfb33c4132ba3240.jpg)
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/4d3d2ab33c4133bae5ad32c96a37c97623bc2f40.jpg)
![Javascript脚本特效示例:[33]时间日期转换](https://exp-picture.cdn.bcebos.com/d2001d7de137c97618504c7144672b5fd4462b40.jpg)