原生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中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python递归实现快速排序
2018/08/18 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python如何读取bin文件并下发串口
2019/07/05 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python 两个数据库postgresql对比
2019/10/21 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
季度思想汇报
2014/01/01 职场文书
教师个人鉴定材料
2014/02/08 职场文书
汉字听写大会观后感
2015/06/12 职场文书
葬礼主持词
2015/07/02 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL