javascript页面设计案例【使用HTML、CSS和JavaScript创建一个基本的互动网页】

一个简单的JavaScript页面设计案例。展示如何使用HTML、CSS和JavaScript创建一个基本的互动网页,其中包括一个按钮和一个文本显示区域。当用户点击按钮时,文本显示区域的内容会发生变化。

HTML部分

创建HTML结构,包括一个按钮和一个用于显示文本的div元素。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>JavaScript Page Design Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<h1>JavaScript Interaction Example</h1>

<div id="textDisplay">Hello, World!</div>

<button id="changeTextButton">点击!</button>

</div>

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

</body>

</html>

CSS部分

使用CSS来美化页面,设置字体、颜色、布局等。

/* styles.css */

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

}

.container {

text-align: center;

background-color: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

#textDisplay {

font-size: 24px;

margin-bottom: 20px;

}

#changeTextButton {

padding: 10px 20px;

font-size: 18px;

cursor: pointer;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

transition: background-color 0.3s;

}

#changeTextButton:hover {

background-color: #0056b3;

}

JavaScript部分

使用JavaScript来实现按钮点击时文本内容的变化。

// script.js

document.addEventListener('DOMContentLoaded', (event) => {

const textDisplay = document.getElementById('textDisplay');

const changeTextButton = document.getElementById('changeTextButton');

changeTextButton.addEventListener('click', () => {

textDisplay.textContent = '你点击了按钮!';

});

});

说明:

‌HTML‌:创建了一个包含标题、文本显示区域和按钮的容器。

‌CSS‌:设置了页面的基本样式,包括字体、颜色、布局和按钮的样式。还为按钮添加了悬停效果。

‌JavaScript‌:使用document.addEventListener来监听DOM内容加载完成的事件。一旦页面加载完成,就为按钮添加一个点击事件监听器。当用户点击按钮时,文本显示区域的内容会改变。

这个案例展示了如何使用HTML、CSS和JavaScript来创建一个简单的互动网页。

相关推荐
EveryPossible9 分钟前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说11 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
listhi52019 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊8 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A9 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理9 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
郑板桥3010 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
解道Jdon10 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
gnip11 小时前
pnpm 的 monorepo架构多包管理
前端·javascript