使用Javascript制作一个动态页面
时间: 2024-03-25 09:36:05 浏览: 30
好的,下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态页面</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #333;
}
#content {
margin: 20px auto;
width: 80%;
background-color: white;
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>欢迎来到动态页面!</h1>
<div id="content">
<p>这是一个动态页面。</p>
<p>点击下面的按钮可以改变文字的颜色。</p>
<button onclick="changeColor()">改变颜色</button>
</div>
<script>
function changeColor() {
var content = document.getElementById("content");
var color = content.style.backgroundColor;
if (color === "white") {
content.style.backgroundColor = "lightblue";
} else {
content.style.backgroundColor = "white";
}
}
</script>
</body>
</html>
```
这个页面有一个标题、一个内容区域和一个按钮,点击按钮可以改变内容区域的背景颜色。注意到这里使用了JavaScript来实现动态效果。具体实现方法是定义了一个`changeColor()`函数,它通过`document.getElementById()`方法获取内容区域的DOM元素,并改变它的背景颜色。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)