Question

我必须制作一个游戏，其中有一个8x8的桌子和一个硬币显示在他们身上（一次超过10个位置）同时在不同的位置上3000毫秒。硬币显示应该点击＆＃34;开始＆＃34;按钮，它持续1分钟。我的问题是我无法制作一个随机函数，它在不同的位置上随机生成图像。它给出了一些错误的appendchild undefined。我希望我的图像在不同的位置上随机显示），这就是我尝试过的到目前为止。我刚刚开始学习JS，所以请不要判断我的代码和代码。我再次发布此消息是因为我在之前的帖子中没有得到任何回复。我有＆＃34;显示：无;＆＃34;所有的硬币，我想要在硬币显示块的多个位置的随机功能。 PS：我不能使用任何Jquery并删除之前完成的错误

＆＃13;

function tableCreate(){
    var body = document.body;
    var tbl  = document.createElement('table');
    tbl.style.width  = '730px';
    tbl.style.height = '650px';
    tbl.style.border = '4px solid grey';
	tbl.style.display = 'inline-block';

    for(var i = 0; i < 8; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < 8; j++){
			var td = tr.insertCell();
		    var div = document.createElement('div');
            td.appendChild(div);
		    div.innerHTML = '<img src="coin.png" alt="coin.png" class="coin_img" id="coin_image">';
            td.style.border = '1px solid black';
			td.style.width = '85px';
			td.style.height = '75px';
			td.id = 'r' + i + 'c' + j;
        }
    }
    body.appendChild(tbl);
	
}
function onTimer() {
    var seconds = 60;
    function tick() {
        var counter = document.getElementById("counter");
        seconds--;
        counter.innerHTML = "<h1>Time Left:-"+"0:" + (seconds < 10 ? "0" : "") + String(seconds)+"</h1>";
        if( seconds > 0 ) {
            setTimeout(tick, 1000);
        } else {
            alert("Game over");
        }
    }
    tick();
		setInterval(function(){
			var tbl = document.createElement('table');
			var randomNumber = Math.floor(Math.random() * 7);
			var tr = tbl.getElementsByTagName("tr")[randomNumber];
			var td = tbl.getElementsByTagName("td")[randomNumber];
			var img = tbl.getElementById("coin_image");
			td[randomNumber].appendChild(img);
			img.style.display = "block";
	}, 3000);
}

function onRestart()
{
	location.reload();
}

＆＃13;

.button_class
{
	float: left;
	display: inline-block;
	width: 400px;
}
.btn
{
	width: 140px;
   height: 50px;
   margin: 20px;
   font-size: 16px;
	background-color: 
}
.coin_img
{
	width: 100%;
	height: 70px;
	display: none;
}
.counter_div
{
	margin-left: 20px;
}

＆＃13;

<body onload="tableCreate()">
	<div class="button_class">
    <button type="button" name="start_button" class="start_button btn" id="st_button" onclick="onTimer()">Start</button>
	  <button type="button" name="restart_button"  class="restart_button btn" id="rs_button" onclick="onRestart()">Restart</button>
	  <div class="counter_div" id="counter">
      <h1>Total Time:-1:00</h1>
    </div>
	</div>	
</body>

＆＃13;

Answer 1

我想我可以调整你的代码：

function tableCreate(){
    var body = document.body;
    var tbl  = document.createElement('table');
    tbl.id = 'myTable';
    tbl.style.width  = '730px';
    tbl.style.height = '650px';
    tbl.style.border = '4px solid grey';
	  tbl.style.display = 'inline-block';

    for(var i = 0; i < 8; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < 8; j++){
			var td = tr.insertCell();
		    var div = document.createElement('div');
            td.appendChild(div);
		    div.innerHTML = '<img src="http://icons.iconarchive.com/icons/awicons/vista-artistic/128/coin-icon.png" alt="coin.png" class="coin_img" id="coin_image">';
            td.style.border = '1px solid black';
			td.style.width = '85px';
			td.style.height = '75px';
			td.id = 'r' + i + 'c' + j;
        }
    }
    body.appendChild(tbl);
	
}
function onTimer() {
    var seconds = 60;
    function tick() {
        var counter = document.getElementById("counter");
        seconds--;
        counter.innerHTML = "<h1>Time Left:-"+"0:" + (seconds < 10 ? "0" : "") + String(seconds)+"</h1>";
        if( seconds > 0 ) {
            setTimeout(tick, 1000);
        } else {
            alert("Game over");
        }
    }
    tick();
		setInterval(function(){
			var tbl = document.getElementById('myTable');
			var randomNumber = Math.floor(Math.random() * 7);
			var tr = Array.prototype.slice.call(tbl.getElementsByTagName("tr"))[randomNumber];
			var td = Array.prototype.slice.call(tr.getElementsByTagName("td"))[randomNumber];
			var img = document.getElementById("coin_image");
			td.appendChild(img);
			img.style.display = "block";
	}, 3000);
}

function onRestart()
{
	location.reload();
}

.button_class
{
	float: left;
	display: inline-block;
	width: 400px;
}
.btn
{
	width: 140px;
   height: 50px;
   margin: 20px;
   font-size: 16px;
	background-color: 
}
.coin_img
{
	width: 100%;
	height: 70px;
	display: none;
}
.counter_div
{
	margin-left: 20px;
}

<body onload="tableCreate()">
	<div class="button_class">
    <button type="button" name="start_button" class="start_button btn" id="st_button" onclick="onTimer()">Start</button>
	  <button type="button" name="restart_button"  class="restart_button btn" id="rs_button" onclick="onRestart()">Restart</button>
	  <div class="counter_div" id="counter">
      <h1>Total Time:-1:00</h1>
    </div>
	</div>	
</body>

您的不准确之处：

最初在函数tableCreate()中创建tbl.id ='myTable';

tbl

onTimer()

var tbl = document.getElementById('myTable');

getElementsByTagName("tr")之类的函数返回HTMLCollections，不是数组。将其转换为数组使用 Array.prototype.slice.call(tbl.getElementsByTagName("tr"))
如果我没有记错，你只能打电话给getElementById document，因此它应该是var img = document.getElementById("coin_image");，而不是var img =tbl.getElementById("coin_image");

td

onTimer变量已包含td 元素，无需添加索引。所以，它应该是 td.appendChild(img);
为避免将所有硬币放在同一行，请更改var td = Array.prototype.slice.call(tbl.getElementsByTagName("td"))[randomNumber]; 到var td = Array.prototype.slice.call(tr.getElementsByTagName("td"))[randomNumber];

它使你的代码工作，但还有其他一些，比方说逻辑问题，因为硬币不会从细胞中消失。它们也仅出现在坐标为（0,0）（2,2）（4,4）等的单元格上，因为您只生成一次随机数，然后将它用于行和列。我不知道也许这就是你想要的。如果没有，也可以继续努力。

Answer 2

我不确切地知道你在找什么，但它可能多次使用相同的ID不是一个好选择

<script type="text/javascript">
 function tableCreate(){
    var body = document.body;
    var tbl  = document.createElement('table');
    tbl.style.width  = '730px';
    tbl.style.height = '650px';
    tbl.style.border = '4px solid grey';
    tbl.style.display = 'inline-block';

for(var i = 0; i < 8; i++){
    var tr = tbl.insertRow();
    for(var j = 0; j < 8; j++){
        var td = tr.insertCell();
        var div = document.createElement('div');
        td.appendChild(div);
        div.innerHTML = '<img src="coin.png" alt="coin.png" class="coin_img" id="coin_image'+i+'">';
        td.style.border = '1px solid black';
        td.style.width = '85px';
        td.style.height = '75px';
        td.id = 'r' + i + 'c' + j;
    }
}
body.appendChild(tbl);  
}
function onTimer() {
    var seconds = 60;
    function tick() {
       var counter = document.getElementById("counter");
       seconds--;
       counter.innerHTML = "<h1>Time Left:-"+"0:" + (seconds < 10 ? "0" : "") + String(seconds)+"</h1>";
    if( seconds > 0 ) {
        setTimeout(tick, 1000);
    } else {
        alert("Game over");
    }
}
tick();
    setInterval(function(){
        var tbl = document.createElement('table');
        var randomNumber = Math.floor(Math.random() * 7);
        //var tr = tbl.getElementsByTagName("tr")[randomNumber];
        //var td = tbl.getElementsByTagName("td")[randomNumber];
        var img = document.getElementById("coin_image"+randomNumber+"");
        //td[randomNumber].appendChild(img);
        img.style.display = "block";
}, 3000);
}
function onRestart()
{
location.reload();
}

使用JS在表中多次显示单个图像

2 个答案: