【发布时间】：2016-02-09 11:11:13
【问题描述】：
我目前正在做一个学校练习，但我不知道怎么做。
所以我有这个：
当我单击其中一个案例时，应该显示正确的图像（例如图像是马里奥图片），但问题是我只得到它的名称。我想知道我必须更改什么才能显示图片而不是名称。
请让我知道我应该在我的代码中更改什么，我是初学者。非常感谢！
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*<![CDATA[*/
div#memory_board{
background:#B0C4DE;
border:#999 1px solid;
width:580px;
height:580px;
padding:0px;
margin:45px auto;
}
div#memory_board > div{
background: url(images/memoryBg.png) no-repeat;
border:none;
width:71px;
height:71px;
float:left;
margin:35px;
padding:0px;
font-size:30px;
cursor:pointer;
text-align:center;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var user = prompt ("Benutzername eingeben und zum Starten auf OK klicken!");
console.log("Willkommen " + user + "!");
document.write ("Willkommen " + user + "!");
var memory_array = [document.getElementById('url(images/card1.png) no-repeat'),document.getElementById('url(images/card1.png) no-repeat'),document.getElementById('card2'),document.getElementById('card2'),document.getElementById('card3')document.getElementById('card3')document.getElementById('card4')document.getElementById('card4')document.getElementById('card5')document.getElementById('card5')document.getElementById('card6')document.getElementById('card6')document.getElementById('card7')document.getElementById('card7')document.getElementById('card8')document.getElementById('card8')];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"><\/div>';
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
alert("Toll gemacht! Neues Spielfeld wird generiert. Um fortzufahren, klicken Sie auf OK");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(images/memoryBg.png) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(images/memoryBg.png) no-repeat';
tile_2.innerHTML = "";
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
//]]>
</script>
<title></title>
</head>
<body>
<div id="memory_board"></div><script type="text/javascript">
//<![CDATA[
newBoard();
//]]>
</script>
</body>
</html>
【问题讨论】：
标签： javascript html css image random