原生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 相关文章推荐
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
javascript前端和后台进行数据交互方法示例
Aug 07 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判断是否为json格式的方法
2014/03/04 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Vue实现附件上传功能
2020/05/28 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
python自动化测试实例解析
2014/09/28 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
django session完成状态保持的方法
2018/11/27 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python中@property的理解和使用示例
2019/06/11 Python
python按比例随机切分数据的实现
2019/07/11 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
责任书格式
2015/01/29 职场文书
会计求职自荐信范文
2015/03/04 职场文书