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

javascript网页设计案例

news 2025/9/24 4:28:07

设计一个具有良好用户体验的 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

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/9/23 0:36:37

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/9/21 3:52:41

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/9/14 20:16:58

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/9/22 13:27:07

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2025/9/23 15:58:59

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/9/22 16:11:12

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/22 16:24:17

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/7/26 23:29:41