第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

如何計(jì)算 Javascript 中圖像的點(diǎn)擊次數(shù)？

如何計(jì)算 Javascript 中圖像的點(diǎn)擊次數(shù)？

阿晨1998 2023-05-19 14:27:49
我需要創(chuàng)建一個(gè)網(wǎng)頁，其中有一個(gè)按鈕“開始青蛙游戲”。每當(dāng)用戶點(diǎn)擊“開始青蛙游戲”按鈕時(shí)： ● 按鈕下方會出現(xiàn)一條消息，提示“ 您的分?jǐn)?shù)為 0 ”；● 比分信息下， 每半秒， 隨機(jī) 出現(xiàn) 5 張 圖像 中 的 一張，圖像高度應(yīng)為 150 像素；● 當(dāng)用戶點(diǎn)擊青蛙圖片時(shí)，用戶將獲得1分，分?jǐn)?shù)消息應(yīng)相應(yīng)更新；● 當(dāng)用戶點(diǎn)擊其他圖片時(shí)，用戶 失去1分 ，分?jǐn)?shù)消息應(yīng)相應(yīng)更新（如果用戶失去太多，分?jǐn)?shù)可能變?yōu)樨?fù)數(shù)）；● 當(dāng)分?jǐn)?shù)達(dá)到 5 時(shí)，用戶贏得游戲，游戲停止（圖像停止變化），分?jǐn)?shù)消息應(yīng)顯示“ 你的分?jǐn)?shù)是 5。游戲結(jié)束 - 你贏了！ ”● 當(dāng)分?jǐn)?shù)下降到-5，則用戶輸?shù)粲螒?，游戲停止（圖像停止變化），分?jǐn)?shù)信息應(yīng)顯示“ 你的分?jǐn)?shù)是-5。游戲結(jié)束 - 你輸了！ ”用戶可以點(diǎn)擊“開始青蛙游戲”按鈕重新玩游戲，分?jǐn)?shù)應(yīng)重置為 0。我做了什么：現(xiàn)在已經(jīng)能夠創(chuàng)建一個(gè)網(wǎng)頁來計(jì)算任何圖像被點(diǎn)擊的次數(shù)并讓它顯示下面的分?jǐn)?shù)。我需要什么幫助：我似乎無法弄清楚如何僅在單擊青蛙圖像時(shí)使點(diǎn)數(shù)增加，然后在僅單擊其他圖像（不是青蛙）時(shí)使點(diǎn)數(shù)減少。當(dāng)分?jǐn)?shù)達(dá)到 5（你贏）或 -5（你輸）時(shí)，我也無法嘗試讓圖像停止。這是我的代碼：function rollImages(){  var counter = 0;  var interval = setInterval(function () {    if (counter === 10000) {      clearInterval(interval);      return;    }    var imageValue = Math.floor(Math.random() * 5) + 1;    var imageFile = "img" + imageValue + ".png";    var theImage = document.getElementById("display");    theImage.src = imageFile;    counter++;  }, 500);}var scoreClick = 0;function score(){  scoreClick = scoreClick + 1;  var scoreSpan = document.getElementById("scoreDisplay");  scoreSpan.innerHTML = scoreClick;  if (scoreClick == 5){    scoreDisplay.innerHTML = " Game over - you win!";  }}function minusScore(){  scoreClick = scoreClick - 1;  var scoreSpan = document.getElementById("scoreDisplay");  scoreSpan.innerHTML = scoreClick;}<button onClick="rollImages()">Start frog game</button><br /><br /><img height='150px' id="display" onclick="score()"><br /><br /><p id="score">Your score is:<span id="scoreDisplay">0</span></p>
查看完整描述

3 回答

?
慕哥9229398

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊

您需要一種方法來識別當(dāng)前圖像是否是青蛙。您可以通過隨時(shí)向圖像添加一個(gè)類rollImages()、檢查其來源或?yàn)槠涮峁?ID 來執(zhí)行此操作：


function rollImages() {

  var counter = 0;

  var interval = setInterval(function () {

    if (counter === 10000) {

      clearInterval(interval);

      return;

    }


    var imageValue = Math.floor(Math.random() * 5) + 1;

    var imageFile = "img" + imageValue + ".png";


    var theImage = document.getElementById("display");

    theImage.src = imageFile;

  

    if (imageValue === 1) {   // <--- Whatever imageValues correspond to frogs

      theImage.classList.add("frog");

    } else {

      theImage.classList.remove("frog");

    }


    counter++;

  }, 500);

}

然后你的score函數(shù)（你只需要一個(gè)）可以確定圖像是否具有“青蛙”類，添加或刪除一個(gè)點(diǎn)，并在需要時(shí)觸發(fā)殘局狀態(tài)：


function score(event) {

  var img = event.target;

  if (img.classList.contains("frog") {

    scoreClick += 1;

  } else {

    scoreClick -+ 1;

  }


  var scoreSpan = document.getElementById("scoreDisplay");


  if (scoreClick >= 5) {

    scoreSpan.innerHTML = " Game over - you win!";

    return;

  }


  if (scoreClick <= -5) {

    scoreSpan.innerHTML = "LOSER!";

    return;

  }

}


查看完整回答
反對 回復(fù) 2023-05-19
?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

區(qū)分青蛙和非青蛙圖像的一種簡單方法是使用數(shù)組。將五個(gè)圖像 URI 存儲在一個(gè)數(shù)組中，讓 arr[0] 是青蛙，然后將圖像從 0 到 4 隨機(jī)化。當(dāng)索引為 0 時(shí)，您知道正在顯示青蛙圖像。



查看完整回答
反對 回復(fù) 2023-05-19
?
慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

所以想法是創(chuàng)建 5 個(gè)圖像 ing html 代碼，青蛙圖像 - onclick="frog"，其余的 - onclick="notfrog()"，在 javascript 文件中創(chuàng)建函數(shù)，每 500 毫秒重復(fù)一次，并制作一個(gè)隨機(jī)圖像出現(xiàn)，另一個(gè)函數(shù) - frog()，執(zhí)行 score++，并檢查 score==5，最后一個(gè)函數(shù)是 notfrog()，與上一個(gè)函數(shù)非常相似，只是 -score--，并檢查 score= =-5,


這是我的代碼：


網(wǎng)頁格式


<style>

    img{

        width: 150px;

        height: 150px;

    }

</style>

<body>

    <img src="./images/frog.jpg" onclick="frog()" id="frog">

    <img src="./images/monkey.jpg" onclick="notfrog()">

    <img src="./images/bird.jpg" onclick="notfrog()">

    <img src="./images/lion.jpg" onclick="notfrog()">

    <img src="./images/giraffe.jpg" onclick="notfrog()">


    <span id="score">0</span>

</body>


javascript


var images = document.querySelectorAll("img");

var score_html = document.getElementById('score');

var score = 0;

var repeat_fn = setInterval(function choose_image(){

    var random = Math.floor(Math.random() * images.length);

    images[random].style.display = 'block';

    for(var i = 0; i<=images.length; i++){

        if(i != random){

            images[i].style.display = 'none';

        }

    }

}, 500)

function frog(){

    score++;

    if(score === 5){

        score_html.innerHTML = "you won";

        score = 0;

    }

    else{


        score_html.innerHTML = score;

    }

}

function notfrog(){

    score--;

    score_html.innerHTML = score;

    if(score === -5){

        score_html.innerHTML = "you lost";

        score = 0;

    }

}


查看完整回答
反對 回復(fù) 2023-05-19
  • 3 回答
  • 0 關(guān)注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號