在HTML代码中使用JavaScript代码的例子

2023年5月18日上午2:53 • JavaScript

在HTML代码中使用JavaScript代码是一种常见的前端编程技巧，可以为网页添加各种交互和动态效果。下面是两个使用JavaScript代码的例子，分别展示在HTML中如何使用内联JavaScript代码和外部JavaScript文件。

内联JavaScript代码

内联JavaScript代码直接在HTML元素的代码里嵌入JavaScript代码，可以实现简单的交互效果。例如，下面是一个简单的例子，实现在网页上显示当前时间：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>显示时间</title>
  </head>
  <body>
    <h1>当前时间：</h1>
    <p id="time"></p>
    <script>
      var now = new Date();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      var timeString = hour + ":" + minute + ":" + second;
      document.getElementById("time").innerHTML = timeString;
    </script>
  </body>
</html>

这段代码定义了一个JavaScript脚本，使用Date对象获取当前时间，并将其小时、分钟和秒数拼接成字符串，使用getElementById函数获取ID为time的p元素，并将时间字符串设置为该元素的innerHTML，从而实现在网页上显示当前时间的效果。

外部JavaScript文件

将JavaScript代码分离到一个独立的文件中，可以使代码更加清晰和易于维护。例如，下面是一个例子，将JavaScript代码存储在单独的文件中，并在HTML中引用该文件，实现简单的鼠标交互效果：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>鼠标交互效果</title>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

script.js

var box = document.getElementById("box");
box.addEventListener("mouseover", function() {
  box.style.backgroundColor = "red";
});
box.addEventListener("mouseout", function() {
  box.style.backgroundColor = "";
});

这段代码定义了一个名为box的div元素，通过getElementById函数获取该元素，然后使用addEventListener函数，为该元素添加鼠标移入和鼠标移出的事件监听器，当鼠标移入时，将其背景色设置为红色，当鼠标移出时，将其背景色清除。最后，在HTML文件的head标签中引用了script.js文件，实现了该功能。

以上就是使用JavaScript代码的两个例子，内联JavaScript代码和外部JavaScript文件。在实际开发中，按需使用不同的方法组织JavaScript代码，以达到最佳的效果和可维护性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在HTML代码中使用JavaScript代码的例子 - Python技术站