这里我将为你提供一个详细的JavaScript网页设计案例。我们将创建一个简单的动态网页，包含一个可以显示当前时间的时钟和一个可以切换背景颜色的按钮。
1. HTML部分
首先，我们需要创建一个HTML文件来定义网页的基本结构。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.">
<title>JavaScript 网页设计案例</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #ffffff;
}
#clock {
font-size: 2em;
margin-bottom: 20px;
}
#colorButton {
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
}
</style>
</head>
<body>
<div id="clock"></div>
<button id="colorButton">切换背景颜色</button>
<script src="script.js"></script>
</body>
</html>
2. CSS部分
上面的HTML文件中已经包含了基本的CSS样式，主要用于设置页面布局、字体和按钮样式。你可以根据需要自行调整这些样式。
3. JavaScript部分
接下来，我们编写script.js文件来实现动态功能。
document.addEventListener("DOMContentLoaded", function() {
// 获取时钟和按钮元素
var clock = document.getElementById('clock');
var colorButton = document.getElementById('colorButton');
// 时钟更新函数
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, '');
var minutes = now.getMinutes().toString().padStart(2, '');
var seconds = now.getSeconds().toString().padStart(2, '');
clock.textContent = `${hours}:${minutes}:${seconds}`;
}
// 每秒更新一次时钟
setInterval(updateClock, 100);
updateClock(); // 立即调用一次以显示初始时间
// 背景颜色数组
var colors = ['#ff9999', '#99ff99', '#9999ff', '#ffff99', '#99ffff'];
var currentColorIndex = ;
// 切换背景颜色函数
function changeBackgroundColor() {
currentColorIndex = (currentColorIndex + 1) % colors.length;
document.body.style.backgroundColor = colors[currentColorIndex];
}
// 为按钮绑定点击事件
colorButton.addEventListener('click', changeBackgroundColor);
});
解释
-
HTML部分：
- 使用
<div>标签创建一个时钟容器。 - 使用
<button>标签创建一个按钮，用于切换背景颜色。 - 使用
<script>标签引入JavaScript文件。
- 使用
-
CSS部分：
- 设置页面的布局，使内容垂直居中显示。
- 设置时钟和按钮的基本样式。
-
JavaScript部分：
- 使用
Document Object Model (DOM)API获取HTML元素。 - 定义
updateClock函数来获取当前时间并更新时钟显示。 - 使用
setInterval每秒调用一次updateClock函数，以实现时钟的自动更新。 - 定义
changeBackgroundColor函数来循环切换背景颜色。 - 为按钮添加点击事件监听器，当用户点击按钮时调用
changeBackgroundColor函数。
- 使用
这样，你就有了一个简单但功能齐全的JavaScript网页设计案例。希望这对你有所帮助！
标签：JavaScript,网页,javascript,updateClock,案例,HTML,按钮,var,时钟 From： https://blog.csdn.net/ab_910256/article/details/141882837