DHTML（动态HTML）

DHTML 是“Dynamic HTML”的缩写，指的是HTML、JavaScript和CSS的结合体。它并没有引入或定义任何新的技术。

本页面提供了一些HTML、JavaScript和CSS集成的示例。

警告消息

<script>
  alert('Hello World!');
</script>

这段代码会显示一个简单的警告消息。

<script>
  let x = prompt('What is your name?');
</script>

这段代码会显示一个简单的提示框，询问用户姓名。

<script>
  confirm('Are you sure?');
</script>

这段代码会显示一个简单的确认框。

按钮与警告

有时候，最好的方法就是直接开始编写代码。以下是一个简单的代码示例：

<!DOCTYPE html>
<html>
 <head>
  <title>"THE BUTTON" - Javascript</title>
    <script>

      // 'msg' 在所有函数之外定义，因此它存在于全局作用域中。
      let msg = 'You have not pressed "THE BUTTON"'

      function bomb() {
        "use strict";
        alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');
        alert('3');
        alert('2');
        alert('1');
        alert('!BOOM!');
        alert('Have a nice day. :-)');
        msg = 'You pressed "THE BUTTON" and I told you not to!';
      }

      function message() {
        "use strict";
        alert(msg);
      }
    </script>
    <style>
      body {
        background-color:#00aac5;
        color:#000
      }
    </style>
  </head>

  <body>
    <div>
      <input type="button" value="THE BUTTON - Don't Click It" onclick="bomb()">
      <p />
      <input type="button" value="Click Here And See If You Have Clicked ''THE BUTTON''" onclick="message()">
    </div>
    <p>
      This script is dual-licensed under both,
      <a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and
      <a href="GNU General Public License">GPL</a>. See 
      <a href="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</a>
    </p>
  </body>
</html>

代码解析

这段代码会在加载时告诉变量 msg 应该是什么值。接下来的代码片段是一个名为 "bomb" 的函数。该函数会触发多个警告消息，并更改 msg 的值。

接下来的部分主要是HTML，附带了一些JavaScript代码。onclick 属性指定点击时要执行的操作。bomb 函数绑定到第一个按钮上；第二个按钮会显示一个警告消息，内容为 msg 的值。

if - else 示例

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome Message</title>
    <script>
      function welcomeMessage() {
       "use strict";
        name = prompt("What is your name?", "");
        const correct = confirm("Are you sure your name is " + name + " ?");
        if (correct === true) {
          alert("Welcome " + name);
        } else {
          welcomeMessage();
        }
      }
    </script>
    <style>
      body {
        background-color:#00aac5;
        color:#000
      }
    </style>
  </head>

  <body onload="welcomeMessage()">
    <p>
      This script is dual-licensed under both,
      <a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and
      <a href="GNU General Public License">GPL</a>. See 
      <a href="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</a>
    </p>
  </body>
</html>

代码解析

这个例子展示了一个欢迎信息。在页面加载时，welcomeMessage 函数会被调用，首先通过 prompt 获取用户的名字，然后通过 confirm 询问用户是否确认该名字。如果确认，显示欢迎信息；如果没有确认，则重新调用 welcomeMessage 函数。

两个脚本示例

示例 1：带有欢迎信息的按钮

现在回到第一个示例。我们修改了脚本，添加了不同的欢迎信息。这个版本要求用户输入名字，并询问是否愿意访问该网站。我们还为按钮添加了一些CSS样式。

<!DOCTYPE html>
<html>
  <head>
    <title>"THE BUTTON" - Javascript</title>
    <script>

      // 'msg' 是在所有函数外部定义的，因此它存在于全局作用域中。
      let msg = 'You have not pressed "THE BUTTON"'

      function bomb() {
        "use strict";
        alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');
        alert('3');
        alert('2');
        alert('1');
        alert('!BOOM!');
        alert('Have a nice day. :-)');
        msg = 'You pressed "THE BUTTON" and I told you not to!';
      }

      function message() {
        "use strict";
        alert(msg);
      }

    </script>
    <style>
      body {
        background-color:#00aac5;
        color:#000
      }
    </style>
  </head>

  <body onload="welcome()">
    <script>
      function welcome() {
        "use strict";
        const name = prompt('What is your name?', '');
        if (name == "" || name == "null") { 
          alert('You have not entered a name');
          welcome();
          return false;
        }
        const visit = confirm('Do you want to visit this website?')
        if (visit == true) {
          alert('Welcome ' + name);
        } else {
          window.location=history.go(-1);
        }
      }
    </script>
    <div>
      <input type="button" value="THE BUTTON - Don't Click It" onclick="bomb()" STYLE="color: #ffdd00; background-color: #ff0000">
      <p />
      <input type="button" value="Click Here And See If You Have Clicked ''THE BUTTON''" onclick="message()">
    </div>
    <p>
      This script is dual-licensed under both,
      <a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and
      <a href="GNU General Public License">GPL</a>. See 
      <a href="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</a>
    </p>
  </body>
</html>

代码解析

  • 在页面加载时，welcome() 函数会提示用户输入名字。如果名字为空或者为 null，会要求重新输入。如果用户同意访问网站，会显示欢迎消息；如果用户拒绝，则会返回上一页。
  • bomb() 函数触发多个警告消息，并修改 msg 的值。

示例 2：简单计算器

<!DOCTYPE html>
<html>
  <head>
    <title>Calculator</title> 
    <script> 
    function multi() {
      "use strict";
      const a = document.Calculator.no1.value;
      const b = document.Calculator.no2.value;
      const p = (a*b);
      document.Calculator.product.value = p;
    }

    function divi() {
      "use strict";
      const d = document.Calculator.dividend.value;
      const e = document.Calculator.divisor.value;
      const q = (d/e);
      document.Calculator.quotient.value = q;
    }

    function circarea() { 
      "use strict";
      const r = document.Calculator.radius.value;
      const a = Math.PI * (r * r);
      document.Calculator.area.value = a;
      const c = 2 * Math.PI * r;
      document.Calculator.circumference.value = c;
    }
    </script>
    <style>
      body {
        background-color:#00aac5;
        color:#000
      }

      label {
        float:left;
        width:7em
      }
    </style>
  </head>

  <body> 
    <h1>Calculator</h1> 
    <form name="Calculator" action="">
      <fieldset>
        <legend>Multiply</legend>
        <input type="text" name="no1"> × <input type="text" name="no2"> 
        <input type="button" value="=" onclick="multi()">
        <input type="text" name="product">
      </fieldset>
      <fieldset>
        <legend>Divide</legend>
        <input type="text" name="dividend"> ÷ <input type="text" name="divisor"> 
        <input type="button" value="=" onclick="divi()">
        <input type="text" name="quotient">
      </fieldset>
      <fieldset>
        <legend>Area and Circumference of Circle</legend>
        <div>
          <label for="radius">Type in radius</label>
          <input type="text" name="radius" id="radius" value=""> 
        </div>
        <div>
          <input type="button" value="=" onclick="circarea()">
        </div>
        <div>
          <label for="area">Area</label>
          <input type="text" name="area" id="area" value="">
        </div>
        <div>
          <label for="circumference">Circumference</label>
          <input type="text" name="circumference" id="circumference" value="">
        </div>
      </fieldset>
    </form> 
    <p>Licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GNU GPL</a>.</p>
  </body> 
</html>

代码解析

  • 该计算器提供了三种功能：乘法、除法和计算圆的面积及周长。
  • multi() 函数用于计算两个数的乘积，divi() 函数用于计算除法结果，circarea() 函数用于计算圆的面积和周长。
  • 计算结果会显示在相应的输入框中。
Last modified: Monday, 13 January 2025, 3:09 PM