html九宫格抽奖代码_html做一个九宫格选秀

html做一个九宫格选秀

用技术带来点娱乐。

程序说明：

先做一个九宫格，

用div的float属性

然后用jquery控制

当鼠标点击div的时候，

显示图片。

效果图：

代码：

<!--
九宫格选秀
-->

<script src="jquery.min.js"></script>
<script>
var i=0;
var j=0;
var k=0;
var i1=0;
var j1=0;
var k1=0;
var i2=0;
var j2=0;
var k2=0;
$(document).ready(function(){
   
  $("#img1").click(function(){
  if(i==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty1.png' width=90px height=90px />");
   i=1;
}

});

  $("#img2").click(function(){
  if(j==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty2.jpg' width=90px height=90px />");
   j=1;
}

});

  $("#img3").click(function(){
  if(k==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty3.jpg' width=90px height=90px />");
   k=1;
}

});
  $("#img4").click(function(){
  if(i1==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty4.jpg' width=90px height=90px />");
   i1=1;
}

});
  $("#img5").click(function(){
  if(j1==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty5.jpg' width=90px height=90px />");
   j1=1;
}

});

  $("#img6").click(function(){
  if(k1==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty6.jpg' width=90px height=90px />");
   k1=1;
}

});

  $("#img7").click(function(){
  if(i2==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty7.jpg' width=90px height=90px />");
   i2=1;
}

});

  $("#img8").click(function(){
  if(j2==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty8.jpg' width=90px height=90px />");
   j2=1;
}

});

  $("#img9").click(function(){
  if(k2==0){
   
   //$("#img1").text("1");
   $(this).append("<img src='beauty3.jpg' width=90px height=90px />");
   k2=1;
}

});



});

</script>


<style>
.board
{
width:300px;
height:300px;
background:rgb(2251,179,151);

position:relative;
left:40%;


}

.pai
{
 background:rgb(216,66,10);
 width:90px;
 height:90px;
float:left;
margin:5px;

}
#tou
{
 background:rgb(250,90,131);
color:rgb(210,6,57);
text-align:center;
}
</style>
<div id="tou"><h1>九宫格选秀开始啦</h1></div>
<div class="board">
     <div class="pai" id="img1"><img id="cat"  /></div>
<div class="pai" id="img2"></div>
<div class="pai" id="img3"></div>

<div class="pai" id="img4"></div>
<div class="pai" id="img5"></div>
<div class="pai" id="img6"></div>

<div class="pai" id="img7"></div>
<div class="pai" id="img8"></div>
<div class="pai" id="img9"></div>
</div>

代码还可以优化，欢迎提建议。