码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript事件练习

时间:2017-03-10 16:32:05      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:char   tab   document   事件   rip   tag   应用   charset   body   

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

 

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  </head>
  <body>
  <button onclick="imgChange(1)">第1张图片</button>
  <button onclick="imgChange(2)">第2张图片</button>
  <button onclick="imgChange(3)">第3张图片</button>
  <button onclick="imgChange(4)">第4张图片</button>
  <div style="margin-top:20px;">
  <img src="img/1.jpg" 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 以及配套的函数,能够提高用户的体验。

 

JavaScript事件练习

标签:char   tab   document   事件   rip   tag   应用   charset   body   

原文地址:http://www.cnblogs.com/cgdblog/p/6531196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!