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

相关推荐
jump_jump23 分钟前
超长定时器 long-timeout
前端·javascript·node.js
我登哥MVP1 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
Mintopia1 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
光影少年2 小时前
vue生态都有哪些?
前端·javascript·vue.js
itslife2 小时前
vite 源码 - 创建 ws 服务
前端·javascript
魔云连洲3 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式
JinSo3 小时前
alien-signals 系列 —— 认识下一代响应式框架
前端·javascript·github
开心不就得了3 小时前
Glup 和 Vite
前端·javascript
爱看书的小沐6 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
井柏然7 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化