<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数独</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
button:hover{
background-color: red;
}
#test{
background-color: red;
width: 156px;
/*width: 100%;*/
}
.geZi{
border: 1px solid red;
float: left;
width: 50px;
height: 50px;
background-color: greenyellow;
text-align: center;
line-height: 50px;
}

.input{
clear: left;
}
.geZi1{
border: 1px solid red;
float: left;
width: 20px;
height: 20px;
background-color: greenyellow;
text-align: center;
line-height: 20px;
}
</style>

<body>
<div id="test">
<button class="geZi" id="a0" onclick="jiSuan(this)"></button>
<button class="geZi" id="a1" onclick="jiSuan(this)"></button>
<button class="geZi" id="a2" onclick="jiSuan(this)"></button>

<button class="geZi" id="a3" onclick="jiSuan(this)"></button>
<button class="geZi" id="a4" onclick="jiSuan(this)"></button>
<button class="geZi" id="a5" onclick="jiSuan(this)"></button>

<button class="geZi" id="a6" onclick="jiSuan(this)"></button>
<button class="geZi" id="a7" onclick="jiSuan(this)"></button>
<button class="geZi" id="a8" onclick="jiSuan(this)"></button>
</div>

<div class="input">
<button class="geZi1" id="aa0" onclick="fuZhi()">1</button>
<button class="geZi1" id="aa1" onclick="fuZhi()">2</button>
<button class="geZi1" id="aa2" onclick="fuZhi()">3</button>

<button class="geZi1" id="aa3" onclick="fuZhi()">4</button>
<button class="geZi1" id="aa4" onclick="fuZhi()">5</button>
<button class="geZi1" id="aa5" onclick="fuZhi()">6</button>
</div>
<script type="text/javascript">
var suzi=[[2,1,3],[4,6,5],[7,8,9]];
var a0=document.getElementById('a0');
var a1=document.getElementById('a1');
var a2=document.getElementById('a2');

var a3=document.getElementById('a3');
var a4=document.getElementById('a4');
var a5=document.getElementById('a5');

var a6=document.getElementById('a6');
var a7=document.getElementById('a7');
var a8=document.getElementById('a8');
a0.innerHTML=suzi[0][0];
a1.innerHTML=suzi[0][1];
a2.innerHTML=suzi[0][2];

a3.innerHTML=suzi[1][0];
a4.innerHTML=suzi[1][1];
a5.innerHTML=suzi[1][2];

a6.innerHTML=suzi[2][0];
a7.innerHTML=suzi[2][1];
a8.innerHTML=suzi[2][2];
var mm;
function jiSuan(obj){
document.getElementById(obj.id).innerHTML=mm;
}
function fuZhi(obj){
var qq=document.getElementById(obj.id);
alert(qq);
}
</script>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>数独</title>
    </head>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    button:hover{
    background-color: red;
    }
    #test{
    background-color: red;
    width: 156px;
    /*width: 100%;*/
    }
    .geZi{
    border: 1px solid red;
    float: left;
    width: 50px;
    height: 50px;
    background-color: greenyellow;
    text-align: center;
    line-height: 50px;
    }.input{
    clear: left;
    }
    .geZi1{
    border: 1px solid red;
    float: left;
    width: 20px;
    height: 20px;
    background-color: greenyellow;
    text-align: center;
    line-height: 20px;
    }
    </style><body>
    <div id="test">
    <button class="geZi" id="a0" onclick="jiSuan(this)"></button>
    <button class="geZi" id="a1" onclick="jiSuan(this)"></button>
    <button class="geZi" id="a2" onclick="jiSuan(this)"></button><button class="geZi" id="a3" onclick="jiSuan(this)"></button>
    <button class="geZi" id="a4" onclick="jiSuan(this)"></button>
    <button class="geZi" id="a5" onclick="jiSuan(this)"></button><button class="geZi" id="a6" onclick="jiSuan(this)"></button>
    <button class="geZi" id="a7" onclick="jiSuan(this)"></button>
    <button class="geZi" id="a8" onclick="jiSuan(this)"></button>
    </div><div class="input">
    <button class="geZi1" id="aa0" onclick="fuZhi(this)">1</button>
    <button class="geZi1" id="aa1" onclick="fuZhi(this)">2</button>
    <button class="geZi1" id="aa2" onclick="fuZhi(this)">3</button><button class="geZi1" id="aa3" onclick="fuZhi(this)">4</button>
    <button class="geZi1" id="aa4" onclick="fuZhi(this)">5</button>
    <button class="geZi1" id="aa5" onclick="fuZhi(this)">6</button>
    </div>
    <script type="text/javascript">
    var suzi=[[2,1,3],[4,6,5],[7,8,9]];
    var a0=document.getElementById('a0');
    var a1=document.getElementById('a1');
    var a2=document.getElementById('a2');var a3=document.getElementById('a3');
    var a4=document.getElementById('a4');
    var a5=document.getElementById('a5');var a6=document.getElementById('a6');
    var a7=document.getElementById('a7');
    var a8=document.getElementById('a8');
    a0.innerHTML=suzi[0][0];
    a1.innerHTML=suzi[0][1];
    a2.innerHTML=suzi[0][2];a3.innerHTML=suzi[1][0];
    a4.innerHTML=suzi[1][1];
    a5.innerHTML=suzi[1][2];a6.innerHTML=suzi[2][0];
    a7.innerHTML=suzi[2][1];
    a8.innerHTML=suzi[2][2];
    var selector;
    function jiSuan(obj){
        selector = obj;
    }
    function fuZhi(obj){
        if(selector) selector.innerHTML = obj.innerHTML;
    }
    </script>
    </body>
    </html>