通俗基础教程
电脑操作教程
电脑怎样拨号上网
如何做个人网页
怎样做局域网
Word教程(文字处理)
图形图象处理入门
经典提高教程
怎样使用代理服务器
如何做无盘工作站
Photoshop教程
Dreamweaver3教程
Flash4教程
Firework3教程
Frontpage2000教程
Authware教程
Office2000教程
如何制作动画图片
OICQ&ICQ使用方法

高手学习指南

硬件升级技巧
CGI教程
ASP教程

PHP教程

注册表使用技巧
路由器的设置
网站建设指南
SQL
合作网站
栏目制作月光软件
最近更新:
类别:网站制作

状态栏上的动态HTML技术

http://www.tongyi.net 作者:童建平

  动态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+="欢迎您?quot;+visits+"次访问本主页。"

  window.status=string;

  //-->

  </script>

  如今在因特网上炙手可热的DHTML,越来越亲近我们。只要我们不懈努力,必能尽情领略其壮丽风景。

   
相关教程
Window.open() 全攻略
HTML文件HEAD内部标记浅析
让网页更容易阅读的方法
状态栏上的动态HTML技术