HTML相关代码问题

创建网页 A2-Task2.html。
网页显示一个图像。每次用户单击图像时，图像都会更改为另一个图像，并且图像下方会显示另一个“globe”表情符号。当“globe”的数量达到五（5）个时，所有“globe”都将被删除（重置）并再次开始显示。例如，用户第 6 次单击图像时，显示一个“globe”，第 7 次 - 两个“globe”，依此类推。

注意：

您应该使用两个图像。每次用户单击图像时，图像都会发生变化。如果显示“海边”的图像，它将更改为“山景”，相反，如果显示“山景”的图像，它将更改为“海边”。
“globe”的特殊字符代码是“🌏”。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>

        </style>
    </head>
    <body>
        <div id='box'>
            <img id='img' style='width: 200px;height: 200px;' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664525452&t=d5b08339b62f58067a22ca6205be87b5'/>
            <div id='globe'>🌏</div>
        </div>
    </body>
    <!-- <script src='./login/plugin/jquery2.1.1.js'></script> -->
    <script type="text/javascript">
        window.onload = function() {
            let imgs = [
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664525452&t=d5b08339b62f58067a22ca6205be87b5',
                'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'
            ];
            let flag = false;
            let str = '🌏'
            let index = 0;
            let count = 0;
            let $img = document.getElementById('img');
            let $globe = document.getElementById('globe');
            $img.onclick = function() {
                index++;
                flag = !flag;
                count = index % 5;
                if(flag) {
                    $img.src = imgs[1]
                } else {
                    $img.src = imgs[0]
                }
                
                let nStr = str.repeat(count+1);
                console.log(count)
                $globe.innerText = nStr;
            }
        }
    </script>
</html>

相当于是添加一个计数器，每次获取图片 count ++ ; 当count 为5 的时候归零


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #imgArea {
            text-align: center;
        }
        #img {
            height: 300px;
            width: auto;
        }
    </style>
</head>
<body>
    <div id="imgArea">
        <img id="img" alt="">
        <p id="globeArea"></p>
    </div>
</body>
<script>
    var sta = true
    var count = 0
    var img = document.getElementById('img')
    setImg(img, sta)
    img.onclick = function () {
        sta = !sta
        setImg(img, sta)
        count ++
        if (count === 5) {
            countEvent()
        } else {
            countEvent(true)
        }
    }
    function setImg (img, status) {
        var imgSrc= status ? 'https://img2.baidu.com/it/u=454726777,1243105233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281' :
                       'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F12%2Fk4%2Fgw.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664525565&t=ce20eb42d9fdb8348e85fd57f5ef9d37'
        img.setAttribute('src', imgSrc)
    }
    function countEvent (status) {
        var globeArea = document.getElementById('globeArea')
        if (!status) {
            globeArea.innerHTML = ''
        } else {
            var globe = document.createElement('span')
            globe.innerHTML = '🌏'
            globeArea.appendChild(globe)
        }
    }
</script>
</html>