原生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 相关文章推荐
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 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
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python psutil库安装教程
2018/03/19 Python
Django如何自定义分页
2018/09/25 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
采购员岗位职责
2013/11/15 职场文书
二手书店创业计划书
2014/01/16 职场文书
机关会计岗位职责
2014/04/08 职场文书
工地宣传标语
2014/06/18 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python