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

JavaScript实现的一些小案例

news 2025/12/21 23:37:55

小案例

灯开关案例

<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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/12/16 16:09:33

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/12/19 21:20:28

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/12/15 11:08:22

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/11/2 1:48:43

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/12/14 1:44:27

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/12/21 1:28:38

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59