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

JavaScript实现的一些小案例

news 2025/9/16 9:43:42

小案例

灯开关案例

<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

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/8/14 5:51:59

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/9/10 8:11:45

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/9/3 8:33:23

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

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

编程新知 2025/9/7 8:51:35

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/9/7 8:50:53

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/3 15:40:48

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/9/1 20:02:32