javascript网页设计案例，非常详细

news2024/11/13 10:17:11

这里我将为你提供一个详细的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>

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函数。