💁🏻♂️《软件世界》 2000年第9期 《状态栏上的动态HTML技术》 福建农林大学 童建平
以下为文字版，扫描版请详见文末图片：
动态HTML（DHTML，Dynamic Hyper Text Markup Language）作为浏览器自带的功能，实际上只是一种概念，并不属于一种专门的技术，不过我们更热衷于将其看作一种网页创作技巧。且看DHTML如何在小小状态栏上尽展身手，从中DHTML之精彩可窥一斑。
一、跑马灯效果
在状态栏可实现多种跑马灯效果，但一般均为比较单调的从左往右或从右往左等滚动效果。而只须将下面代码粘贴于<head>和</head>之间，既能实现字母（或文字）一个接一个地从右边飞向左边的动态效果。可以任意替换代码中的msgBan5中的字符串。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script Language="JavaScript">
<!--
var msgBan5, msgBan5b, chaine5 = "", chainePart5, delaiBan5, ban5;
msgBan5='http://loveme99.yeah.net';
banniere5(20);
function banniere5(delai) {
delaiBan5 = delai;
if (chaine5.length == 0) {
chaine5 = " ";
msgBan5b = msgBan5;
chainePart5 = "";
}
else if (chaine5.length == 1) {
while (msgBan5b.substring(0, 1) == " ") {
chainePart5 = chainePart5 + chaine5;
chaine5 = msgBan5b.substring(0, 1);
msgBan5b = msgBan5b.substring(1, msgBan5b.length);
}
chainePart5 = chainePart5 + chaine5;
chaine5 = msgBan5b.substring(0, 1);
msgBan5b = msgBan5b.substring(1, msgBan5b.length);
for (var i = 0; i < 120; i=i+2)
chaine5 = " " + chaine5;
}
else chaine5 = chaine5.substring(10, chaine5.length);
window.status = chainePart5 + chaine5;
ban5 = window.setTimeout('banniere5(delaiBan5)',delai);
}
-->
</script>
|
二、实时时间
实时时间（包括具体日期）可以以文本框方式出现在网页中，也可以出现在状态栏上，但出现在状态栏上一般只能为难懂的英文格式，如下面的代码一显示格式为"Web Jun 9 13:47:43 UTC+0800 1999"。本人经过探索，可实现中文显示，只须将下面的代码二粘贴于<head>和</head>之间，然后将<body>改为<BODY onLoad="startclock()">即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!--Begin代码一-->
<HTML><HEAD><TITLE></TITLE>
<script language="JavaScript">
<!--
function doClock()
{
window.setTimeout("doClock()",1000);
today=new Date();
self.status=today.toString();
}
-->
</script>
</HEAD>
<BODY onload="doClock()"></BODY></HTML>
<!--End代码一-->
<!--Begin代码二-->
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
var timerID = null;
var timerRunning = false;
chin=new Array("日","一","二","三","四","五","六")
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var day=now.getDay()
var date=now.getDate()
var month=now.getMonth()
var year=now.getYear()
var second=now.getSeconds()
var riqi=(month+1)+"月"+date+"日"
var xingqi="星期"+chin[day]
var nian=(year)+"年"
var timeValue = ""
timeValue +="现在时间是："
timeValue +=nian
timeValue +=" "
timeValue +=riqi+" "
timeValue +=" "
timeValue += (hours >= 12) ? "下午" : "上午"
timeValue +=" "
timeValue +=((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue +=" "
timeValue +=xingqi+" "
window.status = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
-->
</SCRIPT>
<!--End代码二-->
|
三、来访次数统计
将以下代码粘贴于<head>和</head>之间，用于在状态栏显示来访者是第几次来访。如果将以下代码与上面的“跑马灯效果”代码结合起来，使之动态化，是不是可以带给来访者一些惊喜呢？将下面代码最后一句"window.status=string;"删掉，其后粘贴“跑马灯效果”代码的主体部分（即"<!--"和"-->"之间的代码），再将msgBan5字符串内容换成string，即将“msgBan5='http://loveme99.yeah.net';”换成“msgBan5=string;”，即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<script language="JavaScript">
<!--
var caution=false
var string=""
function setCookie(name,value,expires,path,domain,secure)
{
var curCookie=name+"="+escape(value)+((expires)?";expires="+expires.toGMTString():"")+((path)?";domain="+domain:"")+((secure)?";secure":"")
if(!caution||(name+"="+escape(value)).length<=4000)
document.cookie=curCookie
else
if(confirm("小甜饼文件过大，删除？"))
document.cookie=curCookie
}
function getCookie(name)
{
var prefix=name+"="
var cookieStartIndex=document.cookie.indexOf(prefix)
if(cookieStartIndex==-1)
return null
var cookieEndIndex=document.cookie.indexOf(";",cookieStartIndex+prefix.length)
if(cookieEndIndex==-1)
cookieEndIndex=document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex+prefix.length,cookieEndIndex))
}
function deleteCookie(name,path,domain)
{
if(getCookie(name))
{
document.cookie=name+"="+((path)?";path="+path:"")+((domain)?";domain="+domain:"")+";expires=Thu,01-Jan-70 00:00:01 GMT"
}
}
function fixDate(date)
{
var base=new Date(0)
var skew=base.getTime()
if(skew>0)
date.setTime(date.getTime()-skew)
}
var now=new Date()
fixDate(now)
now.setTime(now.getTime()+365*24*60*60*1000)
var visits=getCookie("counter")
if(!visits)
visits=1
else
visits=parseInt(visits)+1
setCookie("counter",visits,now)
string+="欢迎您第"+visits+"次访问本主页。"
window.status=string;
//-->
</script>
|
如今在因特网上炙手可热的DHTML，越来越亲近我们。只要我们不懈努力，必能尽情领略其壮丽风景。
扫描版请详见如下：
