以下是一个使用JavaScript设计网页的示例案例:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript设计网页</title>
<style>
#content {
text-align: center;
padding: 20px;
}
h1 {
color: blue;
}
#btn {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="content">
<h1>欢迎访问JavaScript设计网页</h1>
<button id="btn">点击这里</button>
</div>
<script>
// 获取按钮元素
var btn = document.getElementById("btn");
// 按钮点击事件处理程序
btn.onclick = function() {
// 修改h1元素的文字颜色为红色
var h1Elem = document.querySelector("h1");
h1Elem.style.color = "red";
// 修改按钮的文字内容
btn.innerHTML = "已点击";
// 弹出提示框
alert("按钮被点击了!");
}
</script>
</body>
</html>
这个案例中,我们在HTML中使用JavaScript来设计网页。当点击按钮时,我们会改变h1
元素的文字颜色为红色,修改按钮的文字内容为"已点击",并弹出一个提示框。