sina.com.cn
新浪首页|免费邮件|用户注册|网站地图

科技时代

新浪首页 > 科技时代 > 软件 > 主页制作 > 正文
软件分类教程

● 系统工具
● 网络工具
● 常用工具
● 多媒体类
● 图像处理
● 文字编辑
● 休闲娱乐
● 办公软件
● 编程语言
● 操作系统
● 其它软件
● 软件评测
● 主页制作
● 观点评论





状态栏上的动态HTML技术

http://tech.sina.com.cn 2000/10/10  软件世界 童建平

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

     

  【相关论坛】 【发表评论】  


网站简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 帮助信息 | 网站律师

Copyright © 1996 - 2000 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网