Javascript/DOM程序求助

我想做一个类似打地鼠的JS小程序，如下图
我现在有两个问题
1： 如何让恶魔头像在那区域里面随机出现（频率1秒1次）？（如果是打地鼠的话可以定义地洞，但是随机在区域中我不知道怎么办）
2： 只能用DOM事件，不能用JS事件
现在比较纠结
求各位给点主意啊，谢谢！

解决方案 »

  1.   

    可以做个table,在每个td上用数字赋值一个id值,然后随机这些id如果随机到的数==id 就显示恶魔头像
      

  2.   

    提示好像是用setInterval定义动画元素
      

  3.   

    setInterval 每秒执行一次 var i = 0;
      var max = 100;
      var intervalId = null;  function incNum(){
    i++;
    if(i==100){
    clearInterval(intervalId);
    }
      }intervalId = setInterval(incNum,1000);
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    table{
    border: 1px solid black;
    }
    td{
    width: 20px;
    height: 20px;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- function randShow(){
    // 随机0-16
    var randNum = myRandom(0,16);
    clearBack();
    document.getElementById(''+randNum).style.background = 'red';
    } function clearBack(){
    var tds = document.getElementsByTagName('td');
    for(var i=0,len = tds.length;i<len;i++){
    tds[i].style.background = '#fff';
    }
    }

    // 随机方法
    function myRandom(startIndex,endIndex){
    var i = endIndex - startIndex;
    return Math.floor(Math.random()*i + startIndex);
    }

    var intervHander = null;
    function doStart(){
    intervHander = setInterval(randShow,1000);
    } function stop(){
    clearInterval(intervHander);
    intervHander = null;
    }
    //-->
    </SCRIPT>
     </HEAD> <BODY onload="doStart()">
      <TABLE cellpadding="0" cellspacing="0">
      <TR>
    <TD id="0"></TD>
    <TD id="1"></TD>
    <TD id="2"></TD>
    <TD id="3"></TD>
      </TR>
      <TR>
    <TD id="4"></TD>
    <TD id="5"></TD>
    <TD id="6"></TD>
    <TD id="7"></TD>
      </TR>
      <TR>
    <TD id="8"></TD>
    <TD id="9"></TD>
    <TD id="10"></TD>
    <TD id="11"></TD>
      </TR>
      <TR>
    <TD id="12"></TD>
    <TD id="13"></TD>
    <TD id="14"></TD>
    <TD id="15"></TD>
      </TR>
      </TABLE>  <INPUT TYPE="button" VALUE="start" ONCLICK="doStart();">
      <INPUT TYPE="button" VALUE="stop" ONCLICK="stop();">
     </BODY>
    </HTML>