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

JavaScript实现的一些小案例

news 2026/5/13 19:50:05

小案例

灯开关案例

<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

ChatGPT 2026不是升级，是重构：Transformer-XL²架构、128K动态上下文、本地化模型热插拔——你还在用2023版？这5个信号说明你已被淘汰

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ChatGPT 2026&#xff1a;一场从架构内核出发的范式革命 ChatGPT 2026 并非简单的能力叠加&#xff0c;而是以「动态稀疏混合专家&#xff08;Dynamic Sparse MoE&#xff09;」为核心重构推理路径&…...

编程新知 2026/5/13 19:39:45

我用了半年只留下这1个！2026年英语录音转文字选它真不踩坑

做学术调研的朋友多半都遇过这些坑&#xff1a;熬了半个月跑了10场受访者访谈&#xff0c;攒了8小时录音&#xff0c;手动整理整整花了一周&#xff0c;眼睛都熬花了还错漏一堆&#xff1b;听国外名家讲座录了音&#xff0c;转写工具一堆专业词汇识别错&#xff0c;口音还认不出…...

编程新知 2026/5/13 19:33:25

华大HC32F4A0 RS485通信避坑指南：从PCLK时钟疑惑到DMA地址偏移的完整排错记录

HC32F4A0 RS485实战&#xff1a;从时钟配置到DMA接收的工程化实现 调试华大半导体的HC32F4A0芯片进行RS485通信时&#xff0c;时钟配置、USART初始化和DMA接收这三个环节最容易出现隐蔽性问题。本文将结合具体工程案例&#xff0c;分享如何规避PCLK时钟分频陷阱、解决RTOF标志异…...

编程新知 2026/5/13 19:25:01

openOii：开源工业信息集成框架架构解析与实战指南

1. 项目概述与核心价值最近在开源社区里&#xff0c;一个名为openOii的项目引起了我的注意。这个由开发者 Xeron2000 发起的项目&#xff0c;从名字上就透着一股“开放”和“工业”的气息。作为一个在工业自动化和数据集成领域摸爬滚打了十多年的老兵&#xff0c;我深知在制造业…...

编程新知 2026/5/13 18:40:13

告别嘟嘟声！用Arduino和Python给蜂鸣器编程，轻松播放任意MP3旋律

用Arduino与Python解锁蜂鸣器的音乐潜能&#xff1a;从基础音调到智能编曲 在创客的世界里&#xff0c;让硬件发出声音一直是最富成就感的项目之一。传统51单片机虽然功能强大&#xff0c;但对于现代开发者而言&#xff0c;其开发环境配置复杂、调试困难等问题常常让人望而却步…...

编程新知 2026/5/13 16:25:13

免费Windows桌面分区工具NoFences：3分钟打造高效工作空间

免费Windows桌面分区工具NoFences&#xff1a;3分钟打造高效工作空间 【免费下载链接】NoFences &#x1f6a7; Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 还在为杂乱无章的Windows桌面而烦恼吗&#xff1f;NoFen…...

编程新知 2026/5/13 15:34:57

Umi-CUT：如何用一款免费工具实现批量图片去黑边与智能裁剪

Umi-CUT&#xff1a;如何用一款免费工具实现批量图片去黑边与智能裁剪 【免费下载链接】Umi-CUT 图片批量去黑边/裁剪/压缩工具&#xff0c;带界面。可排除图片边缘的色块干扰&#xff0c;将黑边删除干净。基于 Opencv 。 项目地址: https://gitcode.com/gh_mirrors/um/Umi-C…...

编程新知 2026/5/13 15:28:51

AI智能体技能栈构建：基于Claw与Hermes框架的模块化实践

1. 项目概述&#xff1a;构建我的AI智能体技能栈最近在折腾AI智能体&#xff08;Agent&#xff09;的开发&#xff0c;特别是围绕Claw和Hermes这两个框架。如果你也对这个领域感兴趣&#xff0c;想打造一个能处理复杂任务、拥有多种技能的智能助手&#xff0c;那么我整理的这个…...

编程新知 2026/5/13 15:04:30

AutoJs6架构深度解析：JavaScript自动化引擎在Android平台的实现原理

AutoJs6架构深度解析&#xff1a;JavaScript自动化引擎在Android平台的实现原理 【免费下载链接】AutoJs6 安卓平台 JavaScript 自动化工具 (Auto.js 二次开发项目) 项目地址: https://gitcode.com/gh_mirrors/au/AutoJs6 AutoJs6作为Android平台领先的JavaScript自动化…...

编程新知 2026/5/13 12:37:46

终极KMS激活指南：如何永久免费激活Windows和Office系统

终极KMS激活指南&#xff1a;如何永久免费激活Windows和Office系统 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows激活弹窗而烦恼吗&#xff1f;是否遇到过Office突然变成只读模式…...

编程新知 2026/5/13 10:40:36