精品主页 | 软件下载 | 系统下载 | 精品导航| 精彩图片 | 转帖工具 | 版主申请 | 影视下载
发新话题
打印

状态栏上的动态 HTML 技术

状态栏上的动态 HTML 技术

  


                  动态HTML(DHTML,Dynamic Hyper Text Markup Language)作为浏览器自带的功能,实际上只是一种概念,并不属于一种专门的技术,不过我们更热衷于将其看作一种网页创作技巧。且看DHTML如何在小小状态栏上尽展身手,从中DHTML之精彩可窥一斑。



一、跑马灯效果

在状态栏可实现多种跑马灯效果,但一般均为比较单调的从左往右或从右往左等滚动效果。而只须将下面代码粘贴于<head>和</head>之间,既能实现字母(或文字)一个接一个地从右边飞向左边的动态效果。可以任意替换代码中的msgBan5中的字符串。

<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()">即可。

<!--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;”,即可。

<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,越来越亲近我们。只要我们不懈努力,必能尽情领略其壮丽风景。

TOP

发新话题