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

JavaScript基础-常见网页特效案例

news 来源：原创 2025/6/29 5:21:49

在现代Web开发中，JavaScript不仅是处理业务逻辑的核心工具，也是实现丰富交互体验的关键。通过JavaScript，我们可以轻松地为网页添加各种动态效果和交互特性，从而提升用户体验。本文将介绍几种常见的网页特效案例，并提供相应的实现代码示例。

一、图片轮播（Image Slider）

图片轮播是一种非常流行的网页特效，常用于展示产品图片或广告内容。下面是一个简单的图片轮播实现：

HTML结构：

<div class="slider"><img src="image1.jpg" id="slider-image">
</div>
<button onclick="prevImage()">Previous</button>
<button onclick="nextImage()">Next</button>

JavaScript实现：

let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let index = 0;function updateImage() {document.getElementById('slider-image').src = images[index];
}function nextImage() {index = (index + 1) % images.length;updateImage();
}function prevImage() {index = (index - 1 + images.length) % images.length;updateImage();
}

二、下拉菜单（Dropdown Menu）

下拉菜单可以有效地节省页面空间，同时提供良好的用户交互体验。以下是一个简单的下拉菜单实现：

HTML结构：

<div class="dropdown"><button onclick="toggleMenu()">Menu</button><div id="menu-items" style="display: none;"><a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a></div>
</div>

JavaScript实现：

function toggleMenu() {let menu = document.getElementById('menu-items');if (menu.style.display === "none") {menu.style.display = "block";} else {menu.style.display = "none";}
}

三、选项卡切换（Tab Switching）

选项卡切换是另一种常见的网页特效，它允许用户在一个有限的空间内查看不同的内容。以下是其实现：

HTML结构：

<div class="tabs"><button onclick="openTab(event, 'Tab1')">Tab 1</button><button onclick="openTab(event, 'Tab2')">Tab 2</button><button onclick="openTab(event, 'Tab3')">Tab 3</button>
</div><div id="Tab1" class="tab-content">Content for Tab 1</div>
<div id="Tab2" class="tab-content" style="display:none;">Content for Tab 2</div>
<div id="Tab3" class="tab-content" style="display:none;">Content for Tab 3</div>

JavaScript实现：

function openTab(evt, tabName) {let i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tab-content");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tabs")[0].getElementsByTagName("button");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(tabName).style.display = "block";evt.currentTarget.className += " active";
}

四、表单验证（Form Validation）

确保用户输入的数据符合预期是非常重要的，JavaScript可以帮助我们在客户端进行基本的表单验证。这里给出一个简单的例子来验证邮箱格式是否正确。

HTML结构：

<form onsubmit="return validateEmail()"><input type="email" id="email" placeholder="Enter your email"><button type="submit">Submit</button>
</form>
<p id="error-message" style="color:red;"></p>

JavaScript实现：

function validateEmail() {let email = document.getElementById('email').value;let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!regex.test(email)) {document.getElementById('error-message').innerText = "Please enter a valid email address.";return false;}return true;
}

五、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！

JavaScript基础-常见网页特效案例

在现代Web开发中，JavaScript不仅是处理业务逻辑的核心工具，也是实现丰富交互体验的关键。通过JavaScript，我们可以轻松地为网页添加各种动态效果和交互特性，从而提升用户体验。本文将介绍几种常见的网页特效案例，并提供…...

编程日记 2025/6/29 5:21:49

数据结构4

day4 5.队列 Queue 5.1 特性队列是只允许再两端进行插入和删除操作的线性表，在队尾插入，在队头删除，插入的一段被称为“队尾”，删除的一端被称为“队头”。队列包括循环队列(顺序队列)、链式队列。结构：先进先出&…...

编程日记 2025/6/28 3:43:30

Rust 为什么不适合开发 GUI

前言在当今科技蓬勃发展的时代，Rust 编程语言正崭露头角，逐步为世界上诸多重要基础设施提供动力支持。从存储海量信息到应用于 Linux 内核，Rust 展现出强大的实力。然而，当涉及构建 GUI（图形用户界面）时&…...

编程日记 2025/6/28 1:20:10

DisplayPort版本对比

目前视频接口标准基本上被HDMI和DisplayPort两大标准给瓜分天下了。 （1） HDMI由消费电子厂商主导，最新版本（如HDMI 2.1）理论带宽为48Gbps，主要应用于电视、游戏主机及家庭影音设备。 （2&#xf…...

编程日记 2025/6/28 5:44:33

YOLOv12即插即用-Pconv(风车卷积)

1.模块介绍 PinwheelConv（风车状卷积）充分利用了IRST（红外搜索与跟踪）中的高斯分布特性，以极少的参数实现了高效且更大感受野的特性。此外，本文还提出了一种简单而高效的 SD 损失函数，有效缓解了标签 IoU 变化带来的不稳定性。通过与现有卷积模块和损失函数的广泛对比，…...

编程日记 2025/6/28 6:29:21

AI知识补全（十四）：零样本学习与少样本学习是什么？

名人说：一笑出门去，千里落花风。——辛弃疾《水调歌头我饮不须劝》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：AI知识补全（十三）：注意力…...

编程日记 2025/6/28 6:31:46

Pycharm(十一）:字符串练习题

1.输入一个字符串，打印所有偶数位上的字符(下标是0，2，4，6...位上的字符) # 练习题1:输入一个字符串，打印所有偶数位上的字符(下标是0，2，4，6...位上的字符) # 1.键盘录入字符串&…...

编程日记 2025/6/28 6:46:49

设计原则之迪米特法则

一、定义迪米特法则又称为最少知识原则（Law of Demeter，LoD），是一项用于面向对象设计的基本原则之一。该原则强调一个对象应该对其他对象有最少的了解，即一个类不应该知道太多关于其他类的内部细节。二、好处迪米…...

编程日记 2025/6/28 4:36:28

Debian系统_主板四个网口1个配置为WAN，3个配置为LAN

Debian系统_主板四个网口1个配置为WAN，3个配置为LAN 一、重新配置网口 1、查看当前网口的状态 ifconfig 或者 ip link show 或者 ls /sys/class/net 2、修改网络配置文件 sudo vi /etc/network/interfaces 注意WAN口的网关地址如果是192.168.3.1的话，L…...

编程日记 2025/6/28 4:17:13

Spring Boot 快速入手

前言：为什么选择 Spring Boot？ 🚀 在现代 Java 开发中，Spring Boot 已成为最流行的后端框架之一。无论是小型 Web 应用、企业级系统，还是微服务架构，Spring Boot 都能提供快速开发、自动配置、轻量级部署的…...

编程日记 2025/6/28 3:16:23

Ubuntu Live USB 如何使用

以下是使用 Ubuntu Live USB 的详细指南，涵盖启动、试用系统、安装系统及常用工具操作： 1. 制作 Ubuntu Live USB • 所需工具： • Ubuntu ISO 镜像（从官网下载）。 • U盘（至少 4GB，数据将被…...

编程日记 2025/6/28 6:28:43

基于单片机的音乐播放器系统设计

基于单片机的音乐播放器系统设计是一个综合性较强的电子系统开发项目系统概述基于单片机的音乐播放器旨在利用单片机的控制功能，结合音频处理电路、存储单元等，实现音乐的播放、暂停、切换、音量调节等功能，可应用于小型便携式音频设备、电子玩具、智能家居背景音乐系统等…...

编程日记 2025/6/28 6:08:38

HttpClient-01.介绍

一.介绍通过HttpClient，我们可以在Java程序中构造并发送Http请求。要使用HttpClient，就要导入依赖坐标。核心API： HttpClient：Http客户端，使用它可以发送http请求。 HttpClients：构建器，使…...

编程日记 2025/6/27 11:25:41

2025年win10使用dockerdesktop安装k8s

一、写作背景百度了一圈， 要么教程老，很多操作步骤冗余， 要么跑不通，或者提供的链接失效等情况。二、看前须知 1、安装过程使用的AI辅助， 因为参考的部分博客卡柱了。 2、如果操作过程中遇到卡顿， …...

编程日记 2025/6/28 5:51:50

技术回顾day2

1.获取文件列表流程：前端根据查询条件封装查询信息，后端接收后进行封装，封装为FileInfoQuery,根据fileInfoQuery使用mybatis的动态sql来进行查询。 2.文件分片上传每次上传需要上传包括(文件名字，文件，md5值&#…...

编程日记 2025/6/28 6:16:56

软件工程-UML

例图，类图，状态图，顺序图，活动图目录例图类图状态图顺序图活动图例图例图由四个元素组成，参与者、用例、系统边界、参与者和用例之间的关系参与者用一个小人表示，用例用椭圆表示&#xff…...

编程日记 2025/6/28 3:26:49

赛逸展2025“创新引擎”启动：限量席位，点亮科技绿色新征程

当今时代，科技革新与绿色发展已然成为推动社会进步的双引擎。2025第七届亚洲消费电子技术贸易展（赛逸展）敏锐捕捉这一趋势，重磅打造“科技创新专区”，并面向科技、绿色企业吹响限量招募号角。这个独具特色的专区紧扣…...

编程日记 2025/6/28 4:32:07

前后台系统

前后台系统（Foreground/Background System）是一种常见的嵌入式系统编程模型，尤其是在那些不需要复杂操作系统的简单系统中。这种系统架构通常用于实时性要求不是极端苛刻的环境，但在响应外部事件时仍需要一定的及时性。下面我将详…...

编程日记 2025/6/28 4:43:07

VHT AMPDU

A - MPDU 由一个或多个 A - MPDU 子帧以及可变数量的 EOF填充子帧组成。在 VHT中，存在如下填充：一个 A - MPDU 子帧的填充子字段中有 0 - 3 个字节。 EOF 填充字段中有零个或多个 EOF 填充子帧。 EOF 填充子帧中EOF填充字节中有 0 - 3 个字节。 A - MPDU 帧结束前填充（A -…...

编程日记 2025/6/28 5:51:43

Spring框架如何做EhCache缓存？

在Spring框架中，缓存是一种常见的优化手段，用于减少对数据库或其他资源的访问次数，从而提高应用性能。Spring提供了强大的缓存抽象，支持多种缓存实现（如EhCache、Redis、Caffeine等），并可以通过…...

编程日记 2025/6/28 6:52:33

助力 Windows 文件管理：重命名与清理重复文件软件精选

软件介绍在日常的电脑使用中，高效管理文件至关重要。接下来为大家介绍几款实用软件，能助您轻松搞定文件管理难题。 AdvancedRenamer：全能批量重命名利器专为 Windows 系统打造的 AdvancedRenamer，功能堪称强大。无论是文本替…...

编程日记 2025/6/28 5:24:56

重建二叉树（C++）

目录 1 问题描述 1.1 示例1 1.2 示例2 1.3 示例3 2 解题思路 3 代码实现 4 代码解析 4.1 初始化 4.2 递归部分 4.3 主逻辑 5 总结 1 问题描述给定节点数为 n 的二叉树的前序遍历和中序遍历结果，请重建出该二叉树并返回它的头结点。例如输入前序遍历序…...

编程日记 2025/6/28 5:51:58

Go+Gin实现安全多文件上传：带MD5校验的完整解决方案

后端 package mainimport ("encoding/json""fmt""log""net/http""os""path/filepath""github.com/gin-contrib/cors""github.com/gin-gonic/gin" )// 前端传来的文件元数据 type FileMetaRe…...

编程日记 2025/6/28 7:17:33

SwanLab Slack通知插件：让AI训练状态同步更及时

在AI模型训练的过程中，开发者常常面临一个难题：如何及时跟踪训练状态？无论是实验超参数的调整、关键指标的变化，还是意外中断的告警，传统的监控方式往往依赖手动刷新日志或反复检查终端，这不仅效率低下&…...

编程日记 2025/6/28 3:53:34

JavaScript元素尺寸与位置

目录 client 家族与 offset 家族一、client 家族：内容区域内边距示例代码应用场景二、offset 家族：内容区域内边距边框滚动条示例代码应用场景三、综合应用场景 1. 动态调整元素高度 2. 拖拽元素 3. 判断元素是否在视口内四…...

编程日记 2025/6/28 4:13:20

IS-IS：单区域集成配置与多区域集成配置

一、IS-IS概述 IS-IS（Intermediate System to Intermediate System） 是一种链路状态内部网关协议（IGP），设计用于自治系统（AS）内部的路由选择。最初由ISO为OSI模型的无连接网络服务（…...

编程日记 2025/6/28 3:45:02

添加底图 viewer.imageryLayers.addImageryProvider(imageryProvider)常见 ImageryProvider 实现类 ArcGisMapServerImageryProvider：用于从 ArcGIS Server 获取影像数据。 BingMapsImageryProvider：用于从 Bing Maps 获取影像数据。 OpenStreetMapIm…...

编程日记 2025/6/28 4:33:15

【学Rust写CAD】22 双圆径向渐变的结构体(two_circle_radial_gradient.rs)

源码 //two_circle_radial_gradient.rs //! 定义双圆径向渐变的结构体和相关功能/// 表示一个双圆径向渐变的源 /// /// 该结构体描述了两个圆之间的渐变，支持矩阵变换和颜色查找表优化 #[derive(Debug, Clone, PartialEq)] pub struct TwoCircleRadialGradientSou…...

编程日记 2025/6/28 1:20:21

基于SpringAOP面向切面编程的一些实践（日志记录、权限控制、统一异常处理）

前言 Spring框架中的AOP（面向切面编程） 通过上面的文章我们了解到了AOP面向切面编程的思想，接下来通过一些实践，去更加深入的了解我们所学到的知识。简单回顾一下AOP的常见应用场景日志记录：记录方法入参、返回值、执…...

编程日记 2025/6/23 7:51:36

acwing 5438. 密接牛追踪2

农夫约翰有 NN 头奶牛排成一排，从左到右依次编号为 1∼N。不幸的是，有一种传染病正在蔓延。最开始时，只有一部分奶牛受到感染。每经过一个晚上，受感染的牛就会将病毒传染给它左右两侧的牛（如果有的话&#xff09…...

编程日记 2025/6/28 11:52:55

【Linux】线程池

目录线程池日志线程池在程序中，会预先创建一批线程，在内部会有一个叫任务队列task_queue的东西，未来如果有任务要处理，就把任务push到任务队列里，然后自动有线程去任务队列里拿任务并处理，如果没有任…...

编程日记 2025/6/28 5:30:48

【11408】考研英语长难句解析策略：三步断开与简化法，快速提升阅读得分

2025.04.01 英语断开长难句分析主谓心得简化长难句心得英语断开长难句在一些长难句中，有时从句的连词会被省略，且没有标点将其隔开，此时就无法通过标点和连接词来断开长难句。那么我们只能够通过分析主谓来断开长难句。分析主谓谓语…...

编程日记 2025/6/28 5:45:26

Spring Cloud 2023.x安全升级：OAuth2.1与JWT动态轮换实战

引言：当安全遇上云原生，零停机密钥轮换成为刚需在微服务架构中，OAuth2.1与JWT已成为身份验证的黄金标准，但传统方案存在两大痛点： 密钥轮换风险：手动替换JWT密钥需重启服务，导致短暂鉴权中断&…...

编程日记 2025/6/28 6:29:33

Vue3.5 企业级管理系统实战（十二）：组件尺寸及多语言实现

1 组件尺寸切换 1.1 用 Pinia 进行 Size 的持久化存储首先，在 src/plugins/element.ts 中增加 size 类型，代码如下： //src/plugins/element.ts import type { App } from "vue";import { ElMessage, ElNotification, ElMessageBo…...

编程日记 2025/6/28 7:05:26

15：00开始面试，15：08就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到8月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/27 14:44:14

Java学习路线 - 第三阶段笔记

Java学习路线 - 第三阶段笔记 Java高级特性（2-3个月） 1. 集合框架深入 1.1 List详解 ArrayList：基于动态数组实现，随机访问高效，插入删除效率低LinkedList：基于双向链表实现，插入删除高效&a…...

编程日记 2025/6/28 3:41:04

【无标题】Scala函数基础

函数和方法的区别 1） 核心概念 （1） 为完成某一功能的程序语句的集合，称为函数。 （2） 类中的函数称之方法。 2） 案例实操 （1） Scala 语言可以在任何的语法结构中声明…...

编程日记 2025/6/28 4:55:39

微信登录、商品浏览前瞻

一.业务效果二.所需技术...

编程日记 2025/6/28 6:01:23

自动化工作流工具的综合对比与推荐

最近收到很多朋友私信我说：“刷短视频的时候，总是刷到自动化工作流的工具，有好多直播间都在宣传，不知道哪款工具好”。我花了点时间，做了一下测试，大家可以参考一下，以下内容： 以下…...

编程日记 2025/6/28 1:20:30

可实现黑屏与蓝屏反应的屏幕隐私保护软件分享

软件介绍在信息安全备受关注的当下，一款能够有效保护屏幕隐私的软件 —— 防窥助手，悄然问世。它由吾爱的遗憾迟香精心开发，为用户的屏幕隐私防护带来全新体验。独特原理，精准守护防窥助手的运行原理相当巧妙，它…...

编程日记 2025/6/28 5:00:53

PERL开发环境搭建＞＞Windows,Linux,Mac OS

特点简单快速 perl解释器直接对源代码程序解释执行,是一个解释性的语言, 不需要编译器和链接器来运行代码>>速度快灵活借鉴了C/C, Basic, Pascal, awk, sed等多种语言, 定位于实用性语言,既具备了脚本语言的所有功能,也添加了高级语言功能开源.免费没有&qu…...

编程日记 2025/6/28 3:51:17

【实战】渗透测试下的传输命令

目录 bitsadmin certutil curl ftp js nc perl php py scp vbs wget WindowsDefender bitsadmin 不支持https、ftp协议，php python带的服务器会出错 >bitsadmin /transfer n http://192.168.1.192/Client.exe e:\1.exe >bitsadmin /rawreturn /…...

编程日记 2025/6/28 5:06:57

JSON 基础知识（一）

第一部分：JSON 基础知识 📢 快速掌握 JSON！文章视频双管齐下 🚀 如果你觉得阅读文章太慢，或者更喜欢边看边学的方式，不妨直接观看我录制的 JSON 课程视频！🎬 视频里会用更直观…...

编程日记 2025/6/28 6:34:04

nodejs：midi-writer-js 将基金净值数据转换为 midi 文件

开放式基金是没有公布每日交易量的。 /funds/data/660008.csv 文件开头： date,jz,ljjz 2016-01-04,1.1141,1.1141 2016-01-05,1.1161,1.1161 2016-01-06,1.1350,1.1350 这是一个将开放式基金数据转换为 MIDI音乐的 js 程序示例。该程序将基金净值映射为 MIDI音符的…...

编程日记 2025/6/28 1:20:25

从零实现Json-Rpc框架】- 项目实现 - 服务端registrydiscovery实现

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/6/28 1:20:28

自适应二值化与形态学变换在图像颜色识别与替换中的应用解析

目录前言一、自适应二值化1.1 取均值 ADAPTIVE_THRESH_MEAN_C1.2 高斯加权求和 ADAPTIVE_THRESH_GAUSSIAN_C1.2.1 一维高斯分布1.2.2 二维高速分布1.2.3 二维高斯分布权重计算规则 1.2.3.1 用户设置了σ1.2.3.2 用户没有设置σ1.3 代码二、形态学变换2.1 核 2.2 腐蚀2.3 膨胀…...

编程日记 2025/6/28 1:20:24

JsonCpp 处理 JSON（现代 C++ 方案）（三）

第三部分：JsonCpp 处理 JSON（现代 C++ 方案） 📢 快速掌握 JSON！文章 + 视频双管齐下 🚀 如果你觉得阅读文章太慢，或者更喜欢边看边学的方式，不妨直接观看我录制的 JsonCpp 课程视频！🎬 视频里会用更直观的方式讲解 JsonCpp 的核心概念、实战技巧，并配有动手演…...

编程日记 2025/6/28 1:20:22

flutter 曲线学习使用第三方插件实现左右滑动

flutter 曲线的使用实现左右滑动 TemperatureChartPage() TemperatureChartPage2() – 不太完善方法 ChartDrawPage import package:doluyo/dly_package/widget/dly_widget.dart; import package:fl_chart/fl_chart.dart; import package:flutter/material.dart; impor…...

编程日记 2025/6/28 1:20:23

【WRF工具】GIS4WRF详细介绍：配置 WPS/WRF

【WRF工具】GIS4WRF详细介绍 QGIS-GIS4WRF安装（Installation）安装 QGIS安装 GIS4WRF GIS4WRF 配置(Configuration)一、如何进入配置界面二、可配置内容1️⃣ 设置工作目录2️⃣ 与 WPS/WRF 集成3️⃣ 与 NCAR 数据档案集成参考 GIS4WRF 是一个在 QGIS 中…...

编程日记 2025/6/28 1:20:27

【自用记录】本地关联GitHub以及遇到的问题

最近终于又想起GitHub，想上传代码和项目到仓库里。由于很早之前有在本地连接过GitHub（但没怎么用），现在需要重新搞起（操作忘得差不多）。在看教程实操的过程中遇到了一些小问题，遂记录一下。前…...

编程日记 2025/6/28 1:20:29

一、图片轮播（Image Slider）

HTML结构：

JavaScript实现：

二、下拉菜单（Dropdown Menu）

HTML结构：

JavaScript实现：

三、选项卡切换（Tab Switching）

HTML结构：

JavaScript实现：

四、表单验证（Form Validation）

HTML结构：

JavaScript实现：

五、结语

相关文章：