|
|
状态栏上的动态HTML技术
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租，e-mail:yesize@hotmail.com 动态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():)+((pa th)?;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:)+;e xpires=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，越来越亲近我们。只要我们不懈努力，必能尽情领略其壮丽风景。
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
加入最爱
热门小游戏分类 
