在Javascript中將圖像切換到其他圖像
[英]Switching images to different images in Javascript
問題描述
我現在正在上大學，並且正在學習Javascript。 我有一個實驗室，要求我在屏幕上顯示三個完全按順序隨機排列的彩色按鈕。 現在，當這些按鈕全部為綠色，全部為紅色或全部為藍色時，您會得到多少積分獎勵。 下面的代碼是到目前為止的內容，但是現在我想解釋一下我的思考過程，也許可以從你們那里得到一些幫助，以幫助我改善我的思考過程。
所以基本上下面我從3個按鈕變量開始。 我發現這些對我完全沒有用。 我以為如果和他們一起發表聲明，我可以做得更復雜，但無法弄清楚。 所以我做了一個叫做randomButton的函數。 然后，我使用一個名為randomNumberOne的變量，並將其設置為與Math.ceil相等，並使之等於1 -3。 然后，我寫了一條if語句，說如果該變量中的數字設置為1，則顯示紅色按鈕；如果顯示2，則顯示紅色按鈕；如果顯示3，則顯示藍色。 然后我調用該函數3次，因為我希望它顯示3次。 現在，我要做的是使之連續3個藍色，紅色或綠色，它將顯示“您獲得x10積分”之類的內容。 我只是不知道該怎么做。 抱歉，如果我輸入的內容沒有意義，我仍在學習，而且我渴望學習。 謝謝你的時間。
<!doctype html> <html> <head> <script> var button1 = "<img src=red.jpg>" var button2 = "<img src=green.jpg>" var button3 = "<img src=blue.jpg>" function randomButton() { var randomNumberOne = Math.ceil(Math.random() * 3); if (randomNumberOne === 1) { document.write("<img src= red.jpg>"); } else if (randomNumberOne === 2) { document.write("<img src= green.jpg>"); } else if (randomNumberOne === 3) { document.write("<img src= blue.jpg>"); } } </script> </head> <body> </body> <script> randomButton() randomButton() randomButton() </script> </html>
4 個解決方案
解決方案1
0 2014-11-15 23:30:16
解決方案2
0 2014-11-15 23:35:43
可能的演示可能類似於以下代碼。 請注意：-我尚未測試-仍有很大的改進空間（例如，可以刪除HTML中的嵌入式javascript，也可以刪除全局var獎勵）...如果需要，我可以讓您做這些改進...
祝好運！
< !doctype html > < html > < head > < script > var bonus = 0; //display the 3 images and increment the bonus if the user win function play(){ var first_img = randomButton(); var second_img = randomButton(); var third_img = randomButton(); document.getElementById('images').innerHTML = first_img + second_img + third_img ; if(first_img==second_img && second_img==third_img){ bonus++; document.getElementById('nb_bonus').innerHTML=bonus; } } //Returns a new random image tag function randomButton() { var images = ["<img src=red.jpg>","<img src=green.jpg>","<img src=blue.jpg>"]; //generate random between 0 and 2 index return images [Math.ceil(Math.random() * 2)]; } < /script> </head > < body > <div id="images"></div> Hi, you have <span id='nb_bonus'>0</span>. <br/> Please click the button in order to align 3 similar images and win some bonus! <input type="button" value="play" onclick="play()"/> </body> </html>
解決方案3
0 已采納 2014-11-15 23:38:53
我會避免使用document.write（），因為它是很久以前使用的古老方法。 如今，這導致瀏覽器的性能優化不佳。
除此之外，您還應該有一個HTML文件，其中包含按鈕，一個CSS文件為它們着色以及一個javascript文件，其中包含用於生成隨機數的業務邏輯，要顯示的按鈕等。 HTML文件（dom元素），您可以使用javascript檢索它們並將它們分配給變量。
請參閱以下內容： JavaScript DOM API在哪里記錄？ 以及Mozilla開發人員網絡上的其他鏈接。
這是一個簡單的JSFiddle鏈接，可以幫助您入門。 http://jsfiddle.net/f4yLLa6c/1/
HTML：
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
Javascript：
function randomNumber() {
return parseInt(Math.random()*10);
}
function randomizeButtons(button1, button2, button3) {
// generate random number
var randomNum = randomNumber(1,3);
if( randomNum == 0 ) {
button1.className = "red";
} else if( randomNum == 1 ) {
button2.className = "blue";
} else if (randomNum == 2) {
button3.className = "green";
} else {
button1.className = "blue";
}
}
function randomButton() {
// get the buttons from the DOM
var redButton = document.getElementById("button1");
var greenButton = document.getElementById("button2");
var blueButton = document.getElementById("button3");
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
}
randomButton();
CSS：
button {
color: white;
font-size: 18px;
}
.red {
background-color: red;
}
.green {
background-color: #006633;
}
.blue {
background-color: blue;
}
按照您的實驗室，它不能完全正常工作，但是足夠讓您入門的入門代碼，如果顏色相同，您可以添加更多邏輯以顯示獎勵積分，並確保按鈕始終顯示顏色。
創建三個單獨的文件（.html，.css和.js）。 確保使用script標記將js文件包含在HTML中，並使用link標記鏈接到樣式表。 祝您好運，如果您需要對javascript，html和CSS的基本介紹，請嘗試訪問codecademy.com！
解決方案4
0 2014-11-15 23:55:38
這里有很多很棒的建議，我在jsFiddle上給了這個概念一個鏡頭： http : //jsfiddle.net/bs8b4d29/
HTML：
<div id="wrapper">
<div class="button" id="A"></div>
<div class="button" id="B"></div>
<div class="button" id="C"></div>
</div>
CSS：
.button {
width: 50px;
height: 20px;
float: left;
border: solid 2px;
margin: 20px;
}
JS：
var buttonArray = ["red","blue","green"];
jackpot(randomizer(), randomizer(), randomizer());
function jackpot(btn1, btn2, btn3) {
document.getElementById("A").style.backgroundColor = buttonArray[btn1];
document.getElementById("B").style.backgroundColor = buttonArray[btn2];
document.getElementById("C").style.backgroundColor = buttonArray[btn3];
}
function randomizer() {
var color = Math.floor(Math.random()*3);
return color;
}
Javascript-在兩個圖像之間切換
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.