25、DHTML 实用技巧与示例

最新推荐文章于 2025-08-02 09:59:37 发布

backprop5master

最新推荐文章于 2025-08-02 09:59:37 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript去神秘化：从零开始的编程之旅文章标签： DHTML CSS JavaScript

本文链接：https://blog.youkuaiyun.com/backprop5master/article/details/149372931

JavaScript去神秘化：从零开始的编程之旅专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

DHTML 实用技巧与示例

1. 引言

在了解了 CSS 的基本工作原理后，我们可以深入探索 DHTML（动态 HTML）代码，为网页增添更多动态和交互性。DHTML 结合了 CSS 和 JavaScript，能让网页实现许多独特的效果，如元素拖动、数字时钟显示、水印背景等。本文将介绍多个 DHTML 的实用示例，帮助你为网页打造更丰富的用户体验。

2. DHTML 代码使用说明

我们将展示由 dynamicdrive.com 提供的几个 DHTML 示例，你可以从他们的网站获取代码，无需手动重新输入。部分示例代码会直接给出，让你了解如何应用 DHTML 实现特殊效果；其他示例仅作展示，代码过长未全部列出，但会提供 dynamicdrive.com 上的 URL，你可复制粘贴到自己的网页中。

需要注意的是，使用 dynamicdrive.com 网站上的 DHTML 代码片段时，务必遵循其说明，将代码插入到 HTML 文档的正确位置，否则代码可能无法正常工作。

3. 通用拖动效果

3.1 效果介绍

通用拖动示例允许访客通过拖动对象到新位置来重新排列网页上的对象。通过定义 drag 类，任何类型的对象，如图像、文本和按钮，都可以被拖动。

3.2 操作步骤

将 <style> 块复制到网页的 <head> 标签中。
将 drag 类名分配给你希望用户在屏幕上重新排列的对象标签的 class 属性。

3.3 示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Dragging Elements</title>
   <style>
   <!--
      .drag{position:relative;cursor:hand}
   -->
   </style>
   <script language="JavaScript1.2">
   <!--
      //Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
      //For full source code and terms of usage, visit http://www.dynamicdrive.com
      var ie=document.all
      var ns6=document.getElementById&&!document.all
      var dragapproved=false
      var z,x,y
      function move(e){
         if (dragapproved){
            z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
            z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
            return false
        }
      }
      function drags(e){
         if (!ie&&!ns6)
            return
         var ﬁ redobj=ns6? e.target : event.srcElement
         var topelement=ns6? "HTML" : "BODY"
         while (ﬁ redobj.tagName!=topelement&&ﬁ redobj.className!= "drag"){
           ﬁ redobj=ns6? ﬁ redobj.parentNode : ﬁ redobj.parentElement
        }
        if (ﬁ redobj.className=="drag"){
           dragapproved=true
           z=ﬁ redobj
           temp1=parseInt(z.style.left+0)
           temp2=parseInt(z.style.top+0)
           x=ns6? e.clientX: event.clientX
           y=ns6? e.clientY: event.clientY
           document.onmousemove=move
           return false
       }
     }
     document.onmousedown=drags
     document.onmouseup=new Function("dragapproved=false")
     //-->
   </script>
</head>
<body>
   <img src="test.gif" class="drag">
   <div class="drag"> <b> Text </b></div>
   <input  type="button" value="Help" class="drag">
</body>
</html>

3.4 流程图

graph TD;
    A[鼠标按下] --> B{是否为 drag 类对象};
    B -- 是 --> C[允许拖动];
    B -- 否 --> D[不处理];
    C --> E[鼠标移动];
    E --> F[更新对象位置];
    G[鼠标松开] --> H[停止拖动];

4. LCD 数字时钟

4.1 效果介绍

你可以使用 DHTML 在网页上添加一个外观和功能都与真实数字时钟相同的数字时钟，并且它能显示正确的时间。

4.2 代码说明

此示例同时使用了类和 ID。类用于赋予时钟数字时钟的外观和感觉，ID 用于在网页上唯一标识时钟。JavaScript 代码会确定正确的时间，并使用 ID 让时钟显示时间。

4.3 示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Digital Clock</title>
   <style>
   <!--
   .styling{
      background-color:black;
      color:lime;
      font: bold 15px MS Sans Serif;
      padding: 3px;
   }
   -->
   </style>
</head>
<body>
   <span id="digitalclock" class="styling"></span>
   <script>
   <!--
      /*****************************************
      * LCD Clock script- by Javascriptkit.com
      * Featured on/available at http://www.dynamicdrive.com/
      * This notice must stay intact for use
      *****************************************/
      var alternate=0
      var standardbrowser=!document.all &!document.getElementById
      if (standardbrowser)
         document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')
      function show(){
         if (!standardbrowser)
            var clockobj= document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
         var Digital=new Date()
         var hours=Digital.getHours()
         var minutes=Digital.getMinutes()
         var dn="AM"
         if (hours==12) dn="PM"
         if (hours>12){
              dn="PM"
              hours=hours-12
           }
           if (hours==0) hours=12
             if (hours.toString().length==1)
           hours="0"+hours
           if (minutes<=9)
              minutes="0"+minutes
           if (standardbrowser){
              if (alternate==0)
               document.tick.tock.value=hours+ " : "+minutes+" "+dn
           else
              document.tick.tock.value=hours+ "   "+minutes+" "+dn
         }
         else{
           if (alternate==0)
             clockobj.innerHTML=hours+ "<font color='lime'>&nbsp;:&nbsp;</font>"+ minutes+ " "+"<sup style='font-size:1px'>"+dn+"</sup>"
          else
             clockobj.innerHTML=hours+"<font color='black'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
         }
         alternate=(alternate==0)? 1 : 0
         setTimeout("show()",1000)
      }
      window.onload=show
   //-->
   </script>
</body>
</html>

4.4 时间更新流程

步骤	操作
1	页面加载时调用 `show` 函数
2	获取当前时间
3	格式化小时和分钟
4	根据浏览器类型更新时钟显示
5	每秒调用一次 `show` 函数更新时间

5. 水印背景图像

5.1 效果介绍

通过在网页上添加个人水印，可以让网页看起来更有档次。水印是一个模糊的图像，它会出现在网页上其他内容的后面，并且在页面滚动时保持位置不变。

5.2 操作步骤

将 notebook.jpg 替换为你想要用作水印的其他图像，该图像将作为网页的背景显示。

5.3 示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Watermark</title>
</head>
<body>
   <script language="JavaScript1.2">
   <!--
      /*
         Watermark Background Image Script- © Dynamic Drive (www.dynamicdrive.com)
         For full source code, 100's more DHTML scripts, and TOS, visit dynamicdrive.com
     */
     if (document.all||document.getElementById)
        document.body.style.background="url('notebook.jpg') white center no-repeat ﬁ xed"
   //-->
   </script>
</body>
</html>

6. 使用 iframe 的标签式文档查看器

6.1 效果介绍

如果你的网站需要访客快速在多个网页之间切换，这个 DHTML 示例很适合你。它允许访客通过使用始终显示在网页顶部的标签来导航多个网页。

6.2 操作原理

导航标签位于链接网页的上方，网页内容会根据访客选择的标签而改变。每个标签都与另一个网页的 URL 相关联。使用 iframe 构建网页， iframe 类似于框架，但可以在窗口内使用，而不是用于分割窗口。

6.3 示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Tabbed Document Viewer</title>
   <style type="text/css">
      /*Eric Meyer's based CSS tab*/
      #tablist{
         padding: 3px 0;
         margin-left: 0;
         margin-bottom: 0;
         margin-top: 0.1em;
         font: bold 12px Verdana;
      }
      #tablist li{
         list-style: none;
         display: inline;
         margin: 0;
      }
      #tablist li a{
         text-decoration: none;
         padding: 3px 0.5em;
         margin-left: 3px;
         border: 1px solid #778;
         border-bottom: none;
         background: white;
      }
      #tablist li a:link, #tablist li a:visited{
        color: navy;
      }
      #tablist li a:hover{
         color: #000000;
         background: #C1C1FF;
         border-color: #227;
      }
      #tablist li a.current{
         background: lightyellow;
      }
   </style>
   <script type="text/javascript">
   <!--
      /***********************************************
      * Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
      * This notice MUST stay intact for legal use
      * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
      ***********************************************/
      var selectedtablink=""
      var tcischecked=false
      function handlelink(aobject){
         selectedtablink=aobject.href
         tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
         if (document.getElementById && !tcischecked){
            var tabobj=document.getElementById("tablist")
            var tabobjlinks=tabobj.getElementsByTagName("A")
            for (i=0; i<tabobjlinks.length; i++)
               tabobjlinks[i].className=""
            aobject.className="current"
            document.getElementById("tabiframe").src=selectedtablink
            return false
        }
        else
          return true
      }
      function handleview(){
         tcischecked=document.tabcontrol.tabcheck.checked
         if (document.getElementById && tcischecked){
            if (selectedtablink!="")
               window.location=selectedtablink
         }
      }
   //-->
   </script>
</head>
<body>
   <ul id="tablist">
      <li><a class="current" href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
      <li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>
      <li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
      <li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>
      <li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
   </ul>
   <iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px">
   </iframe>
   <form name="tabcontrol" style="margin-top:0">
      <input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
   </form>
</body>
</html>

6.4 标签切换流程图

graph TD;
    A[点击标签] --> B{是否勾选复选框};
    B -- 是 --> C[在浏览器窗口打开链接];
    B -- 否 --> D[更新 iframe 内容];
    D --> E[更新标签样式];

7. 每日 iframe 内容

7.1 效果介绍

某些应用程序要求网页上显示的消息根据星期几每天更改。通过使用这个 DHTML 示例，可以轻松实现这一功能。

7.2 操作原理

使用 iframe 划出网页上显示消息的区域。消息包含在分配给 daycontent 数组的几个网页之一中。JavaScript 从系统时钟获取当前日期，根据日期选择要显示的消息。

7.3 示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>New Daily Message</title>
</head>
<body>
   <script type="text/javascript">
   <!--
      /***********************************************
      * Daily iframe content II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
      * This notice MUST stay intact for legal use
      * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
      ***********************************************/
      var ie=document.all
      var dom=document.getElementById
      //Specify IFRAME display attributes
      var iframeprops='width=150 height=150 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"'
      //Specify 31 URLs to display inside iframe, one for each day of the current month
      //If this month has less than 31 days, the last few URLs won't be used.
      var daycontent=new Array()
      daycontent[1]="1.htm"
      daycontent[2]="2.htm"
      daycontent[3]="3.htm"
      daycontent[4]="4.htm"
      daycontent[5]="5.htm"
      daycontent[6]="6.htm"
      daycontent[7]="7.htm"
      daycontent[8]="8.htm"
      daycontent[9]="9.htm"
      daycontent[10]="10.htm"
      daycontent[11]="11.htm"
      daycontent[12]="12.htm"
      daycontent[13]="13.htm"
      daycontent[14]="14.htm"
      daycontent[15]="15.htm"
      daycontent[16]="16.htm"
      daycontent[17]="17.htm"
      daycontent[18]="18.htm"
      daycontent[19]="19.htm"
      daycontent[20]="20.htm"
      daycontent[21]="21.htm"
      daycontent[22]="22.htm"
      daycontent[23]="23.htm"
      daycontent[24]="24.htm"
      daycontent[25]="25.htm"
      daycontent[26]="26.htm"
      daycontent[27]="27.htm"
      daycontent[28]="28.htm"
      daycontent[29]="29.htm"
      daycontent[30]="30.htm"
      daycontent[31]="31.htm"
      //No need to edit after here
      if (ie||dom)
         document.write('<iframe id="dynstuff" src="" '+iframeprops+'></iframe>')
      var mydate=new Date()
      var mytoday=mydate.getDate()
      function dayofmonth_iframe(){
         if (ie||dom){
            var iframeobj=document.getElementById? document.getElementById("dynstuff") : document.all.dynstuff
            iframeobj.src=daycontent[mytoday]
        }
      }
      window.onload=dayofmonth_iframe
   //-->
   </script>
</body>
</html>

7.4 每日消息显示流程

步骤	操作
1	页面加载时获取当前日期
2	根据日期从 `daycontent` 数组中选择 URL
3	将选择的 URL 赋值给 `iframe` 的 `src` 属性

8. 跨浏览器跑马灯

8.1 效果介绍

当网页上有太多内容时，图像和信息往往无法与访客有效沟通。通过在页面上滚动滚动消息（有时称为跨浏览器跑马灯），可以让部分信息脱颖而出。跑马灯可以放置在网页的任何位置。

8.2 获取代码

你可以在 dynamicdrive.com 网站上找到跑马灯代码： www.dynamicdrive.com/dynamicindex2/cmarquee.htm

9. 弹出式日历

9.1 效果介绍

要求访客在网页上输入日期时，由于可以使用多种不同的日期格式，这可能会很困难。Sev Kotchney 设计了一种简单的方法，让访客从弹出式日历中选择日期，然后将日期填充到表单的日期字段中。

9.2 获取代码

Kotchney 的弹出式日历代码可在 www.dynamicdrive.com/dynamicindex6/popcalendar.htm 获取。

10. 下降式内容框

10.1 效果介绍

让网页消息传达给访客的最佳方式之一是在网页加载后将消息下降显示出来。消息会一直显示在屏幕上，直到访客确认消息。

10.2 获取代码

dynamicdrive.com 网站上有一个巧妙的下降式消息框的 DHTML 代码： www.dynamicdrive.com/dynamicindex17/dropinbox.htm

11. 广告框

11.1 效果介绍

除了广告商，没有人喜欢在页面加载时覆盖整个网页的广告。Matt Gabbert 开发了一个 DHTML 广告框代码，这个广告框在网页加载五次中显示一次，显示 10 秒后让位于网页内容，相对比较友好。

11.2 获取代码

你可以在 www.dynamicdrive.com/dynamicindex11/dhtmlad.htm 找到这个广告框的 JavaScript 代码。

12. 常见问题解答

12.1 问题列表

问题	答案
DHTML 是否结合了 CSS 和 JavaScript？	True
使用 DHTML 可以做什么？	a. 放置对象在屏幕的绝对位置；b. 在不同层显示对象；c. 不重新加载页面更改内容；d. 以上所有
DHTML 的标准在哪个 HTML 版本中定义？	None of the above
类定义以什么开头？	Period
ID 以什么开头？	Pound sign
如何应用类？	Assigning the class name to the class attribute
DHTML 是否取代 JavaScript？	False
DHTML 能否使网页像包含多媒体产品功能的桌面应用程序一样工作？	True
类定义中是否包含规则？	True
类在哪个标签中定义？