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

相关推荐
前端付豪26 分钟前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮27 分钟前
js符号(Symbol)
前端·javascript
大怪v1 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ3 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
程序员鱼皮4 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort4 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手4 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码4 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码4 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js