当前位置： 首页 > news >正文

javascript网页设计案例

news 文章来源：https://blog.csdn.net/golove666/article/details/142146889 2025/5/14 15:58:36

设计一个具有良好用户体验的 JavaScript 网页涉及多个方面，如用户界面（UI）、用户体验（UX）、交互设计等。以下是一些示例案例，展示了如何使用 JavaScript 创建功能丰富且吸引人的网页设计。

1. 响应式导航菜单

功能：
  • 动态生成的导航菜单，适应不同屏幕尺寸。
  • 点击菜单按钮时展开/收起子菜单。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Navigation Menu</title><style>body { font-family: Arial, sans-serif; }.nav { display: flex; background-color: #333; }.nav a { color: white; padding: 14px 20px; text-decoration: none; display: block; }.nav a:hover { background-color: #575757; }.menu-toggle { display: none; }@media (max-width: 768px) {.nav { flex-direction: column; }.nav a { display: none; }.nav.show-menu a { display: block; }.menu-toggle { display: block; background: #333; color: white; padding: 14px; cursor: pointer; }}</style>
</head>
<body><div class="menu-toggle">Menu</div><div class="nav"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact</a></div><script>document.querySelector('.menu-toggle').addEventListener('click', function() {document.querySelector('.nav').classList.toggle('show-menu');});</script>
</body>
</html>

2. 动态表单验证

功能：
  • 实时验证用户输入的数据，并显示错误消息。
  • 提交表单时只有在所有字段正确填写的情况下才会被允许。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic Form Validation</title><style>.error { color: red; }</style>
</head>
<body><form id="myForm"><label for="email">Email:</label><input type="email" id="email" name="email" required><span class="error" id="emailError"></span><br><br><label for="password">Password:</label><input type="password" id="password" name="password" required><span class="error" id="passwordError"></span><br><br><input type="submit" value="Submit"></form><script>const form = document.getElementById('myForm');const emailInput = document.getElementById('email');const passwordInput = document.getElementById('password');const emailError = document.getElementById('emailError');const passwordError = document.getElementById('passwordError');emailInput.addEventListener('input', () => {if (!emailInput.validity.valid) {emailError.textContent = 'Please enter a valid email address.';} else {emailError.textContent = '';}});passwordInput.addEventListener('input', () => {if (passwordInput.value.length < 6) {passwordError.textContent = 'Password must be at least 6 characters long.';} else {passwordError.textContent = '';}});form.addEventListener('submit', (event) => {if (!emailInput.validity.valid || passwordInput.value.length < 6) {event.preventDefault();alert('Please correct the errors in the form.');}});</script>
</body>
</html>

3. 动态内容加载（AJAX）

功能：
  • 从服务器动态加载内容，而无需刷新页面。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic Content Loading</title>
</head>
<body><button id="loadContent">Load Content</button><div id="content"></div><script>document.getElementById('loadContent').addEventListener('click', function() {fetch('https://api.example.com/content').then(response => response.json()).then(data => {document.getElementById('content').innerHTML = `<p>${data.message}</p>`;}).catch(error => console.error('Error fetching content:', error));});</script>
</body>
</html>

4. 图表展示

功能：
  • 使用 JavaScript 库（如 Chart.js）创建和展示图表。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chart Example</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body><canvas id="myChart" width="400" height="200"></canvas><script>const ctx = document.getElementById('myChart').getContext('2d');const myChart = new Chart(ctx, {type: 'bar',data: {labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],datasets: [{label: '# of Votes',data: [12, 19, 3, 5, 2, 3],backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1}]},options: {scales: {y: {beginAtZero: true}}}});</script>
</body>
</html>

这些示例展示了不同的 JavaScript 网页设计案例，包括响应式布局、表单验证、动态内容加载和图表展示等。这些技术可以用于创建功能丰富、用户友好的网页。

相关文章：

javascript网页设计案例

设计一个具有良好用户体验的 JavaScript 网页涉及多个方面&#xff0c;如用户界面&#xff08;UI&#xff09;、用户体验&#xff08;UX&#xff09;、交互设计等。以下是一些示例案例&#xff0c;展示了如何使用 JavaScript 创建功能丰富且吸引人的网页设计。 1. 响应式导航菜…...

编程日记 2024/9/16 2:07:38

初阶数据结构【TOP】- 11.普通二叉树的介绍 - 1. (细致,保姆~~!)

文章目录 前言一、普通二叉树的链式结构二、 造树三、普通二叉树的遍历四、遍历完整代码五、总结 前言 本篇文章笔者将会对普通二叉树部分进行细致的讲解 , 本篇主要包括以下内容: 二叉树链式结构的介绍 ,二叉树的遍历. 笔者会一步一步分析带学者领略递归的美好~~ 一、普通二叉…...

编程日记 2024/9/16 2:06:37

【pyenv】pyenv安装版本超时的解决方案

目录 1、现象 2、分析现象 3、手动下载所需版本 4、存放到指定路径 5、重新安装 6、pip失败&#xff08;做个记录&#xff0c;未找到原因&#xff09; 7、方法二修改环境变量方法 7.1 设置环境变量 7.2 更新 7.3 安装即可 8、方法三修改XML文件 前言&#xff1a;研…...

编程日记 2024/9/16 2:05:36

【新片场-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…...

编程日记 2024/9/16 2:04:35

新160个crackme - 057-bbbs-crackme04

运行分析 因软件版本老旧&#xff0c;需使用windows XP虚拟机运行有个SystemID&#xff0c;值为12345678需破解User ID和Password PE分析 yC壳&#xff0c;32位 OD手动脱壳 使用windows XP虚拟机&#xff0c;将程序拖入OD按一下F8&#xff0c;ESP变红&#xff0c;根据ESP定律设…...

编程日记 2024/9/16 2:02:33

车机中 Android Audio 音频常见问题分析方法实践小结

文章目录 前言1. 无声2. 断音3. 杂音4. 延迟播放5. 焦点问题6. 无声问题(连上 BT )其他完善中…… 前言 本文主要总结了一下车机开发中遇到的 Audio 有关的问题&#xff0c;同时参考网上的一案例&#xff0c;由于Audio 模块出现音频问题的场景很多&#xff0c;对每一个出现的问…...

编程日记 2024/9/16 2:00:32

湘大 OJ 代码仓库

有时候不需要上传一些题解&#xff0c;想要上传一些纯代码就行&#xff0c;傻傻把代码上传到文章里面&#xff0c;感觉效率不是很高&#xff0c;还是建立一个代码仓库比较方便 需要会使用魔法可能才能访问&#xff0c;github代码仓库地址...

编程日记 2024/9/16 1:59:31

Ruoyi Cloud K8s 部署

本文视频版本:https://www.bilibili.com/video/BV1xF4Se3Esv 参考 https://blog.csdn.net/Equent/article/details/137779505 https://blog.csdn.net/weixin_48711696/article/details/138117392 https://zhuanlan.zhihu.com/p/470647732 https://gitee.com/y_project/Ruo…...

编程日记 2024/9/16 1:57:29

OpenGL Texture C++ Camera Filter滤镜

基于OpenGL Texture纹理的强大功能&#xff0c;在片段着色器&#xff08;Shader&#xff09;中编写GLSL代码&#xff0c;对YUV的数据进行数据转换从而实现视频编辑软件中的相机滤镜功能。 接上一篇OpenGL Texture C 预览Camera视频的功能实现&#xff0c;本篇来实现Camera滤镜效…...

编程日记 2024/9/16 1:55:25

基于Sobel算法的边缘检测设计与实现

1、边缘检测 针对的时灰度图像&#xff0c;顾名思义&#xff0c;检测图像的边缘&#xff0c;是针对图像像素点的一种计算&#xff0c;目的时标识数字图像中灰度变化明显的点&#xff0c;图像的边缘检测&#xff0c;在保留了图像的重要结构信息的同时&#xff0c;剔除了可以认为…...

编程日记 2024/9/16 1:54:24

java:练习

编写一个 Java 程序&#xff0c;计算并输出从 1 到用户指定的数字 n 中&#xff0c;所有“幸运数字”。幸运数字的定义如下&#xff1a;条件 1&#xff1a;数字的所有位数&#xff08;如个位、十位&#xff09;加起来的和是 7 的倍数。条件 2&#xff1a;数字本身是一个质数&am…...

编程日记 2024/9/16 1:53:23

大数据中一些常用的集群启停命令

文章目录 一、HDFS二、MapReduce && YARN三、Hive 一、HDFS 格式化namenode # 确保以hadoop用户执行 su - hadoop # 格式化namenode hadoop namenode -format启动 # 一键启动hdfs集群 start-dfs.sh # 一键关闭hdfs集群 stop-dfs.sh# 如果遇到命令未找到的错误&#…...

编程日记 2024/9/16 1:52:22

Golang、Python、C语言、Java的圆桌会议

一天&#xff0c;Golang、C语言、Java 和 Python 四位老朋友坐在编程领域的“圆桌会议”上&#xff0c;讨论如何一起完成一个任务&#xff1a;实现一个简单的高并发服务器&#xff0c;用于处理成千上万的请求。大家各抒己见&#xff0c;而 Golang 则是这次会议的主角。 1. Pyth…...

编程日记 2024/9/16 1:49:19

C语言编译原理

目录 一、C语言的编译过程 二、预处理 三、编译阶段 3.1 词法分析&#xff08;Lexical Analysis&#xff09; 3.2 语法分析&#xff08;Syntax Analysis&#xff09; 语法分析的主要步骤&#xff1a; 语法分析的关键技术&#xff1a; 构建AST&#xff1a; 符号表的维护…...

编程日记 2024/9/16 1:42:13

【c++】类和对象（下）（取地址运算符重载、深究构造函数、类型转换、static修饰成员、友元、内部类、匿名对象）

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C 目录 前言 一、取地址运算符重载 1. const修饰成员函数 2. 取地址运算符重载 二、深究构造函数 三、类型转换 四、static修饰成员 1. static修饰成员变…...

编程日记 2024/9/16 1:39:10

Apache POI 学习

Apache POI 学习 1. 引言2. 环境搭建MavenGradle 3. 基础概念4. 基本操作4.1 创建 Excel 文件4.2 读取 Excel 文件 5. 进阶操作5.1 设置单元格样式5.2 数据验证5.3 图表创建5.4 合并单元格5.5 居中对齐5.6 设置边框和字体颜色 6. 性能优化7. 总结 1. 引言 Apache POI 是一个用…...

编程日记 2024/9/16 1:38:08

福建科立讯通信 指挥调度管理平台 SQL注入漏洞

北峰通信-福建科立讯通信 指挥调度管理平台 SQL注入漏洞 厂商域名和信息收集 域名&#xff1a; 工具sqlmap python sqlmap.py -u "http://ip:端口/api/client/down_file.php?uuid1" --batch 数据包 GET /api/client/down_file.php?uuid1%27%20AND%20(SELECT%20…...

编程日记 2024/9/16 1:34:05

4.qml单例模式

这里写目录标题 js文件单例模式qml文件单例模式 js文件单例模式 直接添加一个js文件到qml中 修改内容 TestA.qml import QtQuick 2.0 import QtQuick.Controls 2.12 import "./MyWork.js" as MWItem {Row{TextField {onEditingFinished: {MW.setA(text)}}Button…...

编程日记 2024/9/16 1:32:03

CACTI 0.8.7 迁移并升级到 1.2.7记录

升级前后环境 升级前: CactiEZ 中文版 V10 升级后: Ubuntu 2204 Cacti 1.2.7 升级原因:风险漏洞太多,升不尽,补不完. 升级流程 Created with Raphal 2.3.0 开始 DST:安装Ububtu/Mariadb/apache/php SRC:备份 DB/RRA 数据导入 结束 Cacti 依赖包 注意:UBUNTU下有些包,它非另外…...

编程日记 2024/9/16 1:22:55

OrionX vGPU 研发测试场景下最佳实践之Jupyter模式

在上周的文章中&#xff0c;我们讲述了OrionX vGPU研发测试场景下最佳实践之SSH模式&#xff0c;今天&#xff0c;让我们走进 Jupyter模式下的最佳实践。 • Jupyter模式&#xff1a;Jupyter是最近几年算法人员使用比较多的一种工具&#xff0c;很多企业已经将其改造集成开发工…...

编程日记 2024/9/16 1:20:53

国风编曲：了解国风 民族调式 五声音阶 作/编曲思路 变化音 六声、七声调式

中国风 以流行为基础加入中国特色乐器、调式、和声融为一体的风格 如&#xff1a;青花瓷、菊花台、绝代风华、江南等等等等 省流&#xff1a;中国风&#xff1d;流行民族乐 两者结合&#xff0c;民族元素越多越中国风 流行民族/摇滚民族/电子民族 注意&#xff1a;中国风≠…...

编程日记 2024/9/16 1:19:52

HTTP 响应状态码详解

HTTP状态码详解&#xff1a;HTTP状态码,是用以表示WEB服务器 HTTP响应状态的3位数字代码 小技巧&#xff1a; CtrlF 快速查找 Http状态码状态码含义100客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收&#xff0c;且仍未被拒绝。客户端应当…...

编程日记 2024/9/16 1:18:51

在服务器上开Juypter Lab教程（远程访问）

在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09; 文章目录 在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09;一、安装anaconda1、安装anaconda2、提权限3、运行4、同意协议5、安装6、是否要自动初始化 conda7、结束8、检查 二、Anaconda安装Pytorch…...

编程日记 2024/9/16 1:14:47

【硬件模块】SHT20温湿度传感器

SHT20是一个用IIC通信的温湿度传感器。我们知道这个就可以了。 它支持的电压范围是2.1~3.6V&#xff0c;推荐是3V&#xff0c;所以如果我们的MCU是5V的&#xff0c;那么就得转个电压才能用了。 IIC常见的速率有100k&#xff0c;400k&#xff0c;而SHT20是支持400k的&#xff08…...

编程日记 2024/9/16 1:06:40

Redhat 8,9系(复刻系列) 一键部署Oracle23ai rpm

Oracle23ai前言 Oracle Database 23ai Free 让您可以充分体验 Oracle Database 的能力，世界各地的企业都依赖它来处理关键任务工作负载。 Oracle Database Free 的资源限制为 2 个 CPU（前台进程）、2 GB 的 RAM 和 12 GB 的磁盘用户数据。该软件包不仅易于使用，还可轻松下载…...

编程日记 2024/9/16 1:05:38

SIPp uac.xml 之我见

https://sipp.sourceforge.net/doc/uac.xml.html 这个 uac.xml 有没有问题呢&#xff1f; 有&#xff01; 问题之一是&#xff1a; <recv response"200" rtd"true" rrs"true"> 要加 rrs, 仔细看注释就能看到 问题之二是&#xff1…...

编程日记 2024/9/16 1:03:37

引领智能家居新风尚，WTN6040F门铃解决方案——让家的呼唤更动听

在追求高效与便捷的智能家居时代&#xff0c;每一个细节都承载着我们对美好生活的向往。WTN6040F&#xff0c;作为一款专为现代家庭设计的低成本、高性能门铃解决方案&#xff0c;正以其独特的魅力&#xff0c;悄然改变着我们的居家生活体验。 芯片功能特点&#xff1a; 1.2.4…...

编程日记 2024/9/16 1:01:35

Android 蓝牙服务启动

蓝牙是Android设备中非常常见的一个feature&#xff0c;设备厂家可以用BT来做RC、连接音箱、设备本身做Sink等常见功能。如果一些设备不需要BT功能&#xff0c;Android也可以通过配置来disable此模块&#xff0c;方便厂家为自己的设备做客制化。APP操作设备的蓝牙功能&#xff…...

编程日记 2024/9/16 0:57:33

【安全系列--处理挖矿】

现象&#xff1a;我们云上waf提示有台服务器存在挖矿行为 解决思路&#xff1a; 1、查看服务器的进程情况 top发现服务的CPU使用率非常高 2、使用性能分析工具perf查看占用的cpu进程 sudo apt install linux-tools-common发现一些kernel进程存在异常 3、使用find查一下这…...

编程日记 2024/9/16 0:56:31

SpringBoot集成Thymeleaf模板引擎，为什么使用（详细介绍）

学习本技术第一件事&#xff1a;你为什么要使用&#xff0c;解决什么问题的&#xff1f; 1.为什么使用&#xff08;使用背景&#xff09;&#xff1f; 首先应用场景是单体项目&#xff0c;如果是前后端分离就不用关注这个了&#xff0c;因为单体项目你前后端都是写在一个项目…...

编程日记 2024/9/16 0:55:30