现在开始学习吧 2022-08-31 16:01 采纳率: 31.8%
浏览 75
已结题

HTML相关代码问题

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

注意:

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

3条回答 默认 最新

  • 雾里桃花 2022-08-31 16:29
    关注
    
    <!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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 8月31日
  • 已采纳回答 8月31日
  • 创建了问题 8月31日

悬赏问题

  • ¥15 win10权限管理,限制普通用户使用删除功能
  • ¥15 minnio内存占用过大,内存没被回收(Windows环境)
  • ¥65 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 求螺旋焊缝的图像处理
  • ¥15 blast算法(相关搜索:数据库)
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛?
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi
  • ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面