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/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);
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

配网行波型故障预警定位装置:电力系统的安全守护神

随着科技的不断发展&#xff0c;电力系统的运行和管理已经越来越依赖于先进的技术手段。在这个领域中&#xff0c;配网行波型故障预警定位装置(也被称为智能电网监测设备)已经成为了一种重要的技术装备。它能够实时监测电力系统的运行状态&#xff0c;及时发现并预警故障&#…

服务器和云桥通SDWAN组网的区别

一、服务器的概念 服务器是一种计算设备&#xff0c;用于存储、处理和提供数据和应用服务。通常&#xff0c;服务器配备高性能处理器、大容量存储器和网络接口&#xff0c;其主要目的是提供计算资源、存储资源以及应用程序的托管。这种设备可以用于托管网站、应用程序、数据库和…

游泳耳机哪个牌子好?2024年游泳耳机热门榜单分享

在水中畅游的时光&#xff0c;总是需要一位默契的伴侣&#xff0c;而优秀的游泳耳机正是这段旅程中的完美音乐搭档。近年&#xff0c;游泳耳机市场上涌现了一批备受瞩目的明星产品&#xff0c;它们不仅拥有卓越的防水性能&#xff0c;更以出色的音质和贴合度征服了游泳爱好者的…

gitlab备份-迁移-升级方案9.2.7升级到15版本最佳实践

背景 了解官方提供的版本的升级方案 - GitLab 8: 8.11.Z 8.12.0 8.17.7 - GitLab 9: 9.0.13 9.5.10 9.2.7 - GitLab 10: 10.0.7 10.8.7 - GitLab 11: 11.0.6 11.11.8 - GitLab 12: 12.0.12 12.1.17 12.10.14 - GitLab 13: 13.0.14 13.1.11 13.8.8 13.12.15 - G…

Unity3D Rts游戏里的群体移动算法是如何实现的详解

前言 实时战略&#xff08;RTS&#xff09;游戏是一种以管理和控制虚拟军队为主题的游戏类型。在这类游戏中&#xff0c;玩家需要控制大量的单位进行战斗、资源采集和建设等操作。其中&#xff0c;群体移动算法是实现这些操作的关键之一。本文将详细介绍Unity3D RTS游戏中群体…

github 开源的项目: 一个基于Adaptive AUTOSAR标准的软件平台

关于Adaptive-AUTOSAR这个开源项目: 项目的简介和目标:这个项目是一个基于Adaptive AUTOSAR标准的软件平台,它的目标是为了让开发者能够快速地开发和部署基于Adaptive AUTOSAR的应用程序,以适应汽车行业的新需求和新资源。这个项目的特点和优势是: 它实现了AUTOSAR Runtime…

jQuery HTML - 设置 —— W3school 详解 简单易懂(十二)

jQuery 设置内容和属性 jQuery 获取jQuery 添加 设置内容 - text()、html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容&#xff1a; text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容&#xff08;包括 HTML 标记&#xff09;val()…

JVM实战(34)——内存溢出之消息队列处理不当

一、简介 本章&#xff0c;我们将介绍一个因为处理消息队列中的数据不当而引起的内存溢出问题&#xff0c;先来看下系统的背景。 1.1 系统背景 这是一个线上的数据同步系统&#xff0c;专门从Kafka消费其它系统送进去的数据&#xff0c;处理后存储到自己的数据库中&#xff1…

java——运算符

目录 &#x1f388;算数运算符 1. 基本四则运算符 2.增量运算符 3.自增/自减运算符 &#x1f388;关系运算符 ❗逻辑运算符(重点) &#x1f6a9; 逻辑与 && &#x1f6a9;逻辑 || &#x1f6a9;逻辑非 ! &#x1f6a9;短路求值——java &#x1f388;位运算…

使用frp透传软件搭建本地运行的私有邮箱服务器

起因&#xff1a;随着我公司在线应用软件的增多&#xff0c;比如wordpress、 next cloud、SuitCRM 、iFair等&#xff0c;许多场合都要求填写邮箱地址&#xff0c;绑定邮箱。因为不想将过多的数据存储于第三方空间&#xff0c;因此考虑在公司局域网内搭建一个私有的电子邮箱服务…

初识计算机网络 | 计算机网络的发展 | 协议初识

1.计算机网络的发展 “矛盾是普遍存在的&#xff0c;矛盾是事物联系的实质内容和事物发展的根本动力&#xff01;” 计算机在诞生之初&#xff0c;在军事上用来计算导弹的弹道轨迹&#xff01;在发展的过程中&#xff08;商业的推动&#xff0c;国家政策推动&#xff09;&…

软件工程测试2

1.【单选】“数据流的分解一般达到2层数据流就截止”的说法是否正确 A. 正确 B. 错误 答案&#xff1a;B 2.【单选】 在类图中&#xff0c;哪种关系表达总体与局部的关系 A. 泛化 B. 实现 C. 聚合 D. 依赖 答案&#xff1a;C 3.【多选】从UML时序图中我们能够得到&#xff08;…

ChatGLM论文解读

GLM GLM: General Language Model Pretraining with Autoregressive Blank Infilling 论文地址 1. 背景介绍 1)主流预训练框架 模型介绍结构特点训练目标autoregressive自回归模型,代表GPT,本质上是一个从左到右的语言模型,常用于无条件生成任务(unconditional generat…

openssl3.2/test/certs - 044 - 8192-bit leaf key

文章目录 openssl3.2/test/certs - 044 - 8192-bit leaf key概述笔记END openssl3.2/test/certs - 044 - 8192-bit leaf key 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_git_prj\study\openSSL\test_certs\044\my_openssl_linux_…

composer安装hyperf后,nginx配置hyperf

背景 引入hyperf项目用作微服务&#xff0c;使用composer 安装hyperf后&#xff0c;对hyperf进行nginx配置。 配置步骤 因为hyperf监听的是端口&#xff0c;不像其他laravel、lumen直接指向文件即可。所有要监听端口号。 1 配置nginx server {listen 80;//http&#xff1a…

如何使用宝塔面板配置Nginx反向代理WebSocket(wss)

本章教程&#xff0c;主要介绍一下在宝塔面板中如何配置websocket wss的具体过程。 目录 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 2、代理配置内容 三、注意事项 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 map $http_upgrade $connection_…

HBase学习五:运维排障之备份与恢复

1 snapshot简介 1.1 发展史 distcp:关机全备份。HBase的所有文件都存储在HDFS上,因此只要使用Hadoop提供的文件复制工具distcp将HBASE目录复制到同一HDFS或者其他HDFS的另一个目录中,就可以完成对源HBase集群的备份工作 copyTable:在线跨集群备份。copyTable工具通过MapRed…

uniapp移动端——企业微信H5调用jssdk实现扫一扫,通过weixin-java-cp获取ticket签名,配置config

背景&#xff1a; 使用企业微信开发扫一扫功能 可信域名验证 (1)企业微信的可信域名需要和企业微信的备案主体一致。 域名备案主体可通过站长工具查看域名备案主体。https://icp.chinaz.com/ 企业微信备案主体可以咨询管理员 &#xff08;2&#xff09;通过nginx配置域名归…

【算法Hot100系列】不同路径

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

LIMS源码,实验室信息系统源码,后端框架:asp.net

LIMS(laboratory information management system)即实验室信息管理系统是实验室管理科学发展的成果&#xff0c;是实验室管理科学与现代信息技术结合的产物&#xff0c;是利用计算机网络技术、数据存储技术、快速数据处理技术等&#xff0c;对实验室进行全方位管理的计算机软件…