当然可以。以下是三个HTML中使用JavaScript的应用实例：
实例一：动态更改页面元素
HTML:
html复制代码
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>动态更改页面元素</title> |
|
</head> |
|
<body> |
|
<h1 id="myHeader">欢迎来到我的网站</h1> |
|
<button onclick="changeHeader()">更改标题</button> |
|
|
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
JavaScript (script.js):
javascript复制代码
|
function changeHeader() { |
|
document.getElementById('myHeader').innerHTML = '标题已更改！'; |
|
} |
在这个例子中，当用户点击“更改标题”按钮时，会触发changeHeader函数，该函数会更改具有id="myHeader"的元素的内容。
实例二：表单验证
HTML:
html复制代码
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>表单验证</title> |
|
</head> |
|
<body> |
|
<form id="myForm"> |
|
<label for="name">姓名:</label> |
|
<input type="text" id="name" name="name" required> |
|
<br> |
|
<label for="email">电子邮件:</label> |
|
<input type="email" id="email" name="email" required> |
|
<br> |
|
<input type="submit" value="提交"> |
|
</form> |
|
|
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
JavaScript (script.js):
javascript复制代码
|
document.getElementById('myForm').addEventListener('submit', function(event) { |
|
event.preventDefault(); // 阻止表单的默认提交行为 |
|
|
|
var name = document.getElementById('name').value; |
|
var email = document.getElementById('email').value; |
|
|
|
if (name === '' || email === '') { |
|
alert('所有字段都是必填项！'); |
|
return; |
|
} |
|
|
|
if (!email.includes('@')) { |
|
alert('请输入有效的电子邮件地址！'); |
|
return; |
|
} |
|
|
|
alert('表单提交成功！'); |
|
}); |
在这个例子中，我们使用JavaScript来验证表单的输入。如果用户没有填写所有必填字段或电子邮件地址无效，则会显示警告消息。
实例三：定时器
HTML:
html复制代码
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>定时器</title> |
|
</head> |
|
<body> |
|
<p id="countdown">10</p> |
|
|
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
JavaScript (script.js):
javascript复制代码
|
var count = 10; |
|
var countdownElement = document.getElementById('countdown'); |
|
|
|
var countdownTimer = setInterval(function() { |
|
count--; |
|
countdownElement.innerHTML = count; |
|
|
|
if (count === 0) { |
|
clearInterval(countdownTimer); |
|
alert('倒计时结束！'); |
|
} |
|
}, 1000); |
在这个例子中，我们使用JavaScript的setInterval函数来创建一个倒计时。每秒钟，倒计时数字会减1，直到达到0为止。当倒计时结束时，会显示一个警告消息。
