原生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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
JavaScript实现随机五位数验证码
Sep 27 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常用技巧总结(附函数代码)
2012/02/04 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
php获取微信openid方法总结
2019/10/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
webpack4的迁移的使用方法
2018/05/25 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
python使用tornado实现简单爬虫
2018/07/28 Python
python实现中文文本分句的例子
2019/07/15 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
实习老师个人总结的自我评价
2013/09/28 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
财务负责人任命书
2014/06/06 职场文书
激励员工的口号
2014/06/16 职场文书
学生吸烟检讨书
2014/09/14 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript