原生JS实现隐藏显示图片 JS实现点击切换图片效果


Posted in Javascript onJanuary 27, 2021

今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码,

我先说一下要求:

1.有两个按钮,内容为显示,和换,

2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来

3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来,

4.当图片隐藏的时候,图片不可变换

这就是要求,下面来看代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>换图片</title>
</head>
<body>
<button id="btn">隐藏</button>
<button id="btu">换</button>
<img src="11.jpg" id="img" width="300px" />
</body>
<script>
var btn = document.getElementById("btn");
var btu = document.getElementById("btu");
var img = document.getElementById("img");
 var xia = 0;
 btn.addEventListener("click",function (){
   //判断按钮文字内容
 if(btn.innerText == "隐藏"){
   //当按钮文字为隐藏时,图片隐藏
   img.style.opacity = 0;
   //同时,按钮文字变成现实 下面同理
  btn.innerText = "显示";
 }else{
  img.style.opacity = 1;

  btn.innerText = "隐藏";
 }
 });

 var imgs = ["11.jpg","12.jpg"];
 //给"换"添加点击事件
 btu.addEventListener("click",function (){
  if(btn.innerText == "隐藏"){
  if(xia < 1){
   xia++;
  }else{
   xia = 0;
  }
  img.src = imgs[xia];
 }else{
  alert("图片隐藏,不能切换");
 }
 
});
 
</script>

</html>

就是这么简单,你们学会了吗?

Javascript 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Bootstrap按钮组实例详解
Jul 03 #Javascript
详解使用vue实现tab 切换操作
Jul 03 #Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 #Javascript
React学习笔记之事件处理(二)
Jul 02 #Javascript
React学习笔记之条件渲染(一)
Jul 02 #Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 #Javascript
You might like
java微信开发之上传下载多媒体文件
2016/06/24 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python读取目录下最新的文件夹方法
2018/12/24 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python中 * 的用法详解
2019/07/10 Python
python实现五子棋程序
2020/04/24 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python eval函数介绍及用法
2020/11/09 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
雏鹰争章活动总结
2014/05/09 职场文书
最常使用的求职信
2014/05/25 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
横空出世观后感
2015/06/09 职场文书
中秋晚会致辞
2015/07/31 职场文书
高中军训感想
2015/08/07 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
MySQL学习必备条件查询数据
2022/03/25 MySQL