javascript网页设计案例

Bj陈默

于 2024-08-31 00:37:21 发布

阅读量122

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/chinansa/article/details/141730263

版权

HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 网页设计案例</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1 id="heading">欢迎来到这个网页！</h1>
  <p id="description">这是一个使用 JavaScript 进行动态交互的网页示例。</p>
  <button id="changeButton">点击改变内容</button>

  <script src="script.js"></script>
</body>

</html>

CSS 样式（styles.css）：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: blue;
}

button {
  padding: 10px 20px;
  background-color: green;
  color: white;
  border: none;
  cursor: pointer;
}

JavaScript 脚本（script.js）：

const heading = document.getElementById('heading');
const description = document.getElementById('description');
const changeButton = document.getElementById('changeButton');

changeButton.addEventListener('click', function () {
  heading.textContent = '内容已改变！';
  heading.style.color = 'red';
  description.textContent = '现在网页的内容和样式都发生了变化。';
});

在这个案例中，当用户点击 “点击改变内容” 按钮时，页面上的标题和描述文本的内容和颜色都会发生变化。通过这个简单的例子，你可以看到 JavaScript 如何与 HTML 和 CSS 结合起来，实现网页的动态交互效果。你可以根据自己的需求进一步扩展和修改这个案例，添加更多的交互元素和功能。

Bj陈默

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript网页设计案例

在这个案例中，当用户点击 “点击改变内容” 按钮时，页面上的标题和描述文本的内容和颜色都会发生变化。通过这个简单的例子，你可以看到 JavaScript 如何与 HTML 和 CSS 结合起来，实现网页的动态交互效果。你可以根据自己的需求进一步扩展和修改这个案例，添加更多的交互元素和功能。
复制链接

扫一扫