原生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 jQuery $.post $.ajax用法
Jul 09 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
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
PHP下对数组进行排序的函数
2010/08/08 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
Redis构建分布式锁
2017/03/28 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript GUID生成器实现代码
2009/10/31 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
银行职员思想汇报
2013/12/31 职场文书
关于旅游的活动方案
2014/08/15 职场文书
第一军规观后感
2015/06/12 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python