在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技术站
微信扫一扫 
支付宝扫一扫 