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

JavaScript实现的一些小案例

news 2025/11/5 19:00:08

小案例

灯开关案例

<body><img id="light" src="img/off.jpg"><script>var light = document.getElementById("light");var flag = false;if(flag){light.src = "img/on.jpg";flag = false;}else{light.src = "img/off.jpg";flag = true;}	</script>
</body>

轮播图案例

<body><img src="../../../../imgs/banner_1.jpg" width="100%" id="img"><script>var number = 1;/*修改图片*/function fun(){number ++;if(number > 3){number = 1;}var img = document.getElementById("img");img.src = "../../../../imgs/banner_"+ number +".jpg";}setInterval(fun,3000);</script>
</body>

自动跳转案例

p{text-align: center;font-size: 20px;
}
#time{color: red;
}

<p><span id="time">5</span>秒之后跳转到首页
</p>
<script>var time = document.getElementById("time");var number = 5;function fun(){number --;if(number <= 0){//跳转页面location.href="https://www.baidu.com";}//修改标签体里的内容time.innerHTML = number + "";}//设置定时器setInterval(fun,1000);
</script>

动态表格

  • 样式文件

    table{border: 1px solid;margin: auto;width: 500px;
}
td,th{text-align: center;border: 1px solid;
}
div{text-align: center;margin: 50px;
}

  • html 页面

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态表格</title><link rel="stylesheet" href="table.css">
</head>
<body><div><input type="text" id="id" placeholder="请输入编号"><input type="text" id="name" placeholder="请输入姓名"><input type="text" id="gender" placeholder="请输入性别"><input type="button" id="btn_ad" value="添加"></div><table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><td>岳不群</td><td>？</td><td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td></tr></table><script rel="script" src="table.js"></script>
</body>
</html>

  • JS代码

    var btn_add = document.getElementById("btn_ad");
btn_add.onclick = function (){var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;var table = document.getElementsByTagName("table")[0];table.innerHTML += "<tr>\n" +"            <td>"+id+"</td>\n" +"            <td>"+name+"</td>\n" +"            <td>"+gender+"</td>\n" +"            <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this);\">删除</a></td>\n" +"        </tr>";
}function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);
}

相关文章：

JavaScript实现的一些小案例

小案例 灯开关案例 <body><img id"light" src"img/off.jpg"><script>var light document.getElementById("light");var flag false;if(flag){light.src "img/on.jpg";flag false;}else{light.src "img/…...

编程日记 2024/1/25 19:12:53

MVC模式

Model-View-Controller : 模型-视图-控制器模式&#xff0c;用于应用程序的分层开发。 Model(模型)&#xff1a;代表一个存取数据的对象。也可以带有逻辑&#xff0c;在数据变化时更新控制器。 View(视图)&#xff1a;代表模型包含的数据的可视化。 Controller(控制器)&#xf…...

编程日记 2024/1/25 19:10:51

Java中的代理模式（一）

大家好&#x1f44b;&#xff0c;我是极客涛&#x1f60e;&#xff0c;今天我们聊一聊java中的代理模式&#xff0c;话不多说&#xff0c;还是老思路&#xff0c;什么是代理模式&#xff0c;为什么要有代理模式&#xff0c;如何实现代理模式 代理模式 在说java中的代理模式之前…...

编程日记 2024/1/25 19:08:49

跳跃游戏-算法

题目 给定一个数组nums {1,2,3,4,5}&#xff0c;每个元素nums[i]表示从i这个位置最多可以向前跳跃nums[i]个台阶&#xff0c;求最小需要跳几次就可以调到末尾 思路 反向查找 从末尾开始逐个向前判断最远的起跳位置&#xff0c;接着再以该位置递归的判断 public int jumpT…...

编程日记 2024/1/25 19:05:47

ERP系统哪个好用？用友，金蝶，ORACLE，SAP综合测评

ERP系统哪个好用&#xff1f;用友&#xff0c;金蝶&#xff0c;ORACLE&#xff0c;SAP综合测评 ERP领域SAP、ORACLE相对于国内厂商如用友、金蝶优势在哪&#xff1f; SAP&#xff0c;ORACLE操作习惯一般国人用不惯&#xff1b;相对于国产软件&#xff0c;界面也很难看&#x…...

编程日记 2024/1/25 19:03:45

外汇天眼：美国证券交易委员会（SEC）采纳了一系列规定，以加强与特殊目的收购公司（SPACs）相关的投资者保护

美国证券交易委员会&#xff08;SEC&#xff09;今天通过了一系列新规和修订&#xff0c;以增强特殊目的收购公司&#xff08;SPACs&#xff09;的首次公开募股&#xff08;IPOs&#xff09;中的披露&#xff0c;并在SPACs与目标公司之间的后续业务合并交易&#xff08;de-SPAC…...

编程日记 2024/1/25 19:02:43

kotlin map 与 flatmap

kotlin map 与 flatmap 是2个不同的概念的 map 是一种数据结构&#xff0c;flatmap 是一个高阶函数&#xff0c;处理集合用的 Map Map 是一种数据结构&#xff0c;它由一系列的键值对组成&#xff0c;每个键都是唯一的&#xff0c;并且与一个特定的值相关联。你可以通过键来…...

编程日记 2024/1/25 18:58:39

nginx-rtmp-module 支持 Enhancing RTMP HEVC(H.265)

Enhancing RTMP, FLV 2023年7月31号正式发布&#xff0c;主要支持了HEVC(H.265)、VP9、AV1视频编码&#xff0c;发布差不多半年了&#xff0c;很多开源项目已支持&#xff0c;最近打算播放和推送端也支持下&#xff0c;想找个支持的rtmp server方便测试用&#xff0c;但没找到合…...

编程日记 2024/1/25 18:57:38

2024最新JDK1.8+JDK17+JDK21安装包下载+文档

2024年更新&#xff0c;JDK8的64位和32位安装包都有&#xff0c;Java8最新文档也有&#xff0c;JDK17和JDK21的最新安装包也有 因为网上的安装包都不是最新的&#xff0c;所以自己去Oracle官网登录下载保存了一份&#xff0c;需要的朋友下面网盘链接下载 JDK8—64位安装程序&…...

编程日记 2024/1/25 18:56:37

如何利用chatgpt提升工作效率

chatgpt全领域小助手 项目管理&#xff1a;制定项目计划、跟踪进度、分配任务和记录里程碑。客户服务&#xff1a;回答常见问题、提供产品支持和处理客户投诉&#xff0c;提升客户满意度。销售支持&#xff1a;提供销售培训、销售脚本和客户资料&#xff0c;辅助销售团队进行销…...

编程日记 2024/1/25 18:55:36

WinSCP下载安装并实现远程SSH本地服务器上传文件

文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本地与远程计…...

编程日记 2024/1/25 18:49:27

QEMU搭建arm虚拟机开发环境

获取QEMU代码 git clone https://gitlab.com/qemu-project/qemu.git 切换对应的工程分支 使用git指令切换到对应的分支上&#xff0c;我这里使用的是stable-4.0的分支 git checkout -b stable-4.0 remotes/origin/stable-4.0 配置&编译 在工程的根目录下执行 ./conf…...

编程日记 2024/1/25 18:48:26

web 应用常见的安全问题

一xss攻击 人们经常将跨站脚本攻击&#xff08;Cross Site Scripting&#xff09;缩写为CSS&#xff0c;但这会与层叠样式表&#xff08;Cascading Style Sheets&#xff0c;CSS&#xff09;的缩写混淆。因此&#xff0c;有人将跨站脚本攻击缩写为XSS。 跨站脚本攻击&#xff…...

编程日记 2024/1/25 18:47:25

502. IPO

502. IPO 题目链接&#xff1a;502. IPO 代码如下&#xff1a; //堆的使用 class Solution { public:int findMaximizedCapital(int k, int w, vector<int>& profits, vector<int>& capital) {vector<pair<int,int>> mp;//优先队列默认的是大…...

编程日记 2024/1/25 18:46:24

如何安装MeterSphere并实现无公网ip远程访问服务管理界面

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通…...

编程日记 2024/1/25 18:45:23

做FP独立站怎么引流？这个引流法宝收好了！

近年来&#xff0c;由于卖家数量飙升导致平台竞争持续升级&#xff0c;卖家之间的恶性循环竞争以及平台政策的不断调整等&#xff0c;造成了众多亚马逊等跨境卖家纷纷从平台转向独立站。可是&#xff0c;转型做独立站前要先考虑清楚独立站与平台二者之间的区别。 如果在第三方平…...

编程日记 2024/1/25 18:44:22

幻兽帕鲁PalWorld服务器搭建教程，1分钟开服，纯小白教程，无需基础

雨云面板服快速开幻兽帕鲁PalWorld服务器的教程&#xff0c;配置文件修改方法和配置项中文注释。 最近这游戏挺火&#xff0c;很多人想跟朋友联机&#xff0c;如果有专用服务器&#xff0c;就不需要房主一直开着电脑&#xff0c;稳定性也好得多。 幻兽帕鲁简介 《幻兽帕鲁》…...

编程日记 2024/1/25 18:43:21

算法小抄01

1. 计数排序是一种基于 统计 的排序算法 2. 基于比较的排序算法有&#xff1a;&#xff08;1&#xff09;直接插入排序&#xff1b;&#xff08;2&#xff09;冒泡排序&#xff1b;&#xff08;3&#xff09;简单选择排序&#xff1b;&#xff08;4&#xff09;希尔排序&#…...

编程日记 2024/1/25 18:39:18

Spring Boot 集成 API 文档 - Swagger、Knife4J、Smart-Doc

文章目录 1.OpenAPI 规范2.Swagger: 接口管理的利器3.Swagger 与 SpringFox&#xff1a;理念与实现4.Swagger 与 Knife4J&#xff1a;增强与创新5.案例&#xff1a;Spring Boot 整合 Swagger35.1 引入 Swagger3 依赖包5.2 优化路径匹配策略兼容 SpringFox5.3 配置 Swagger5.4 S…...

编程日记 2024/1/25 18:38:17

2024年软考报名时间及条件，小白必看

不少考生开始准备报名2024年软件水平考试&#xff0c;那么报名软考有没有学历、专业以及工作经验等方面的限制呢?今天就给大家梳理下2024年软考考试&#xff0c;若有变更&#xff0c;也会及时更新内容。 免费送备考资料。联系我 2024年软考考试时间 2024年软考有两次考试&a…...

编程日记 2024/1/25 18:26:07

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/11/1 0:21:42

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/11/3 1:15:14

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/11/5 5:50:50

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/10/28 0:36:19

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/11/2 8:55:05

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/10/27 8:07:15

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/10/28 0:09:57

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/10/29 4:14:03

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/10/30 7:44:42