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来创建一个简单的互动网页。

相关推荐
软件技术NINI1 天前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
苏打水com1 天前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手1 天前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
tianchang1 天前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
JNU freshman1 天前
vue 技巧与易错
前端·javascript·vue.js
Asort1 天前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼1 天前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
却尘1 天前
当你敲下 `pnpm run dev`,这台机器到底在背后干了什么?
前端·javascript·面试