铁人赛 Day24 -- JavaScript 初体验(二) -- 点击後换图片

前言

最近因为上班进度缓慢，所以内容比较慢，但应该也只能这样了哈哈，我们今天也一样会用到 Onclick
那我们之前也有使用 JQuery 的 Onclick 事件，
可以看一下这篇 -->https://ithelp.ithome.com.tw/articles/10263014

点击後变换图片

当这个图片被滑鼠点选的时候，就会在图片之间切换

先找三张大小差不多的照片，那我的照片名称分别是(阿你们就自己命名蛤)
一、 iphone13.jpg
二、 iphone13-0.jpg
三、 iphone13-1.jpg

一样将下方程序存在min.js中(昨天的记得删掉)

min.js

var myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/iphone13.jpg') {
      myImage.setAttribute ('src','images/iphone13-0.jpg');
    } else {
      myImage.setAttribute ('src','images/iphone13-1.jpg');
    }
}

querySelector 昨天也有讲过了，大家可以复习一下昨天的铁人赛
使用 onclick 後再用简单的 if else 去判断就可以啦(在下方附上html)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <style>
      .a{
        display: flex;
        width: auto;
        height: 550px;
        justify-content: center;
        align-items: center;      
      }
      .b{
        border: #000 2px solid;
        width: 650px;
        background-color: rgb(255, 104, 104);
      }
      .b h1{
        text-align: center;
      }
      .b .img1{
        width: 580px;
        height: 270px;
        margin-left: 35px;
        margin-bottom: 25px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
          <h1>Apple 新机发表</h1>
          <img src="images/iphone13.jpg" class="img1">
          <script src="scripts/main.js"></script>     
      </div>     
    </div>
 </body>
</html>

就先这样哈哈，明天在奋战，我们铁人赛Day25见罗!!

<<: [Day10] Flutter GetX flutter_slidable ListView滑动

>>: JavaScript Day 15. every() 与 some()