js

 

DHTML应用示例

 

示例1――纵向滚动文本

  本示例显示了如何实现一种常见的文本纵向滚动效果(文字循环向上滚动,当鼠标移上去时,文字停止滚动,鼠标移开则继续滚动),代码如下。效果...

<HTML>
<HEAD>
 <TITLE>纵向滚动文本效果</TITLE>
</HEAD>
<BODY>
 <TABLE width="188" height="215" 
  cellspacing="1" cellpadding="8" 
  bgcolor="#FFCC00" align="center">
  <TR> 
   <TD height="36" bgcolor="white" align="center"> 
    <FONT style="font-size:14px" face="黑体">
     <B>最新动态</B>
    </FONT>
  <TR> 
   <TD valign="top" bgcolor="white">
    <MARQUEE scrollamount=2 direction="up" id="dong"
     onmouseover="dong.stop()" onmouseout="dong.start()"> 
     <FONT style="font-size:12px">
      <A href="#">1、最新动态~~~~~~</A>
     </FONT><P>
     <FONT style="font-size:12px">
      <A href="#">2、最新动态^&!@*(~#$</A>
     </FONT>
    </MARQUEE>

 </TABLE>
</BODY>
</HTML>

 

示例2――动态显示时间

  本示例显示了如何在网页中显示一个动态时钟(如当前时间处于0点到7点之间,文字会显示为红色),代码如下,效果...

<HTML>
<HEAD>
 <TITLE>动态显示时间示例</TITLE>
 <SCRIPT language="JavaScript" type="text/javascript">
 <!--
  function acquireTime()
  { today=new Date(); //获取当前日期
   with(today)
   { document.all.mytimer.innerText=
     "现在时间:"+getHours()+"点"
     +getMinutes()+"分"+getSeconds()+"秒";
    if(getHours()>=0 && getHours()<=7)
     document.all.mytimer.style.color="red";//更改颜色
    else
     document.all.mytimer.style.color="black";//恢复颜色
   }
  }

 //-->
 </SCRIPT>
<HEAD>
<BODY onload="setInterval('acquireTime()',1000)">
 <P id="mytimer" align="center" ></P>
</BODY>
</HTML>

 

示例3――动态折叠菜单

  本示例实现了一个动态折叠菜单一一当浏览者单击菜单条目时,其子菜单会动态显示或隐藏,并且当鼠标指针移动到菜单条目上时,鼠标指针会变成手形,并且每个子菜单条目在鼠标指针位于其上时变为红色。以下是本示例的源代码,效果...

<HTML>
<HEAD>
<TITLE>动态折叠菜单</TITLE></HEAD>
<STYLE>
<!--
 BODY {font-size:12pt}
 A {font-size:10pt}
 .red {color:red}
 .menu{color:blue; cursor:hand}
 .indent {margin-left:0.3in}
-->
</STYLE>

<SCRIPT language="JavaScript" type="text/javascript">
<!--
 function menuChange() 
 { var src;
  var subId;
  src = window.event.srcElement;
  if (src.className == "menu") 
  { //判断是否单击了某菜单项。
   subId = "sub" + src.id;
   if (document.all(subId).style.display=="none") 
   { //如果没有显示子菜单,则显示。
    document.all(subId).style.display = "";
   }
   
else
   { //如果已经显示子菜单,则折叠。
    document.all(subId).style.display = "none";
   }
  }
 }
//-->
</SCRIPT>

<BODY onClick="menuChange();">
 <H3>单击一个菜单项则可以打开或折叠菜单……</H3>
 <SPAN id="menu1" class="menu">+ 菜单项 1</SPAN> <!-- 定义菜单 -->
 <DIV id="submenu1" style="display:None"> <!-- 定义子菜单-->
  <DIV class="indent"> <!--定义缩进-->
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 1</A><BR>
    <!-- 对象的 className 属性用于访问定义的样式类 -->
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 2</A><BR>
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 3</A><BR>
  </DIV>
 </DIV>
 <BR>
 <SPAN id="menu2" class="menu">+ 菜单项 2</SPAN>
 <DIV id="submenu2" style="display:None">
  <DIV class="indent">
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 1</A><BR>
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 2</A><BR>
  </DIV>
 </DIV>
 <BR>
 <SPAN id="menu3" class="menu">+ 菜单项 3</SPAN>
 <DIV id="submenu3" style="display:None">
  <DIV class="indent">
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 1</A><BR>
   <A href="#" onmouseover = "this.className = 'red'" 
    onmouseout = "this.className = ';'">子菜单项 2</A><BR>
  </DIV>
 </DIV>
</BODY>
</HTML>

 

 

你可能感兴趣的:(js,动态)