博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript事件练习
阅读量:6446 次
发布时间:2019-06-23

本文共 673 字,大约阅读时间需要 2 分钟。

开始学习js一段时间了 ,开始练习了不少的代码,下面和大家分享一下事件的处理练习

 

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  </head>
  <body>
  <button οnclick="imgChange(1)">第1张图片</button>
  <button οnclick="imgChange(2)">第2张图片</button>
  <button οnclick="imgChange(3)">第3张图片</button>
  <button οnclick="imgChange(4)">第4张图片</button>
  <div style="margin-top:20px;">
  <img src="" alt="" id="imgShow" width="250" height="250">
  </div>
  <script>
  var imgShow = document.getElementById("imgShow");
  function imgChange(i)
  {
  imgShow.src = "img/"+i+".jpg";
  }
  </script>
  </body>
  </html>

这是一个点击按钮实现更换图片功能,这里应用了鼠标点击事件 onclick 以及配套的函数,能够提高用户的体验。

 

转载于:https://www.cnblogs.com/cgdblog/p/6531196.html

你可能感兴趣的文章
线上svn快速服务器搭建
查看>>
导航栏带子导航菜单并且高亮
查看>>
openstack-12:安装cinder存储服务
查看>>
防火墙的基础知识
查看>>
Java的新项目学成在线笔记-day10(四)
查看>>
链路捆绑; 远程访问;链路备份;不通vlan通信;静态 默认路由综合实验
查看>>
我国典型电子垃圾拆解地持久性有毒化学污染物污染现状
查看>>
21. 正则工具简介 下
查看>>
Office 365:如何批量初始化OneDrive for Business?
查看>>
centos directory server
查看>>
马哥第一周
查看>>
Fedora 30的升级方法
查看>>
Oracle技术之如何监测一个PLSQL过程的运行情况(一)
查看>>
为什么大部分人喜欢稳定?
查看>>
【NetApp】7mode和Cmode系统之间的相互转换
查看>>
2012.5.7
查看>>
Cent OS查看系统版本信息的几个命令
查看>>
我的友情链接
查看>>
使用正确的筛选参数来提高查询性能
查看>>
网易云课堂Linux运维在线班命令笔记
查看>>