<?php /*顯示原始碼*/ $file=__FILE__; require("src.php"); ?>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background: #ccc;
}
#list {width: 100%;}
.outer{
border: 3px solid white;
width: 120px;
height: 80px;
background: #0C3;
margin: 10px;
padding: 5px;
float: left;
text-align: center;
display:table;
}
.B{
background: gray;
}
.C{
border: 3px solid red;
background: red;
}
.outer div{
margin:0 auto;
width:120px;
display:table-cell; vertical-align:middle;
}
.inner{
font-size: 50px;
font-family: 'verdana';
white-space: nowrap;
color: #fff;
}
.but{
float: left;
margin: 5px 10px;
font-size: 30px;
width: 120px;
height: 80px;
}
.R{
margin-left: 100px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div style="overflow : auto;_width : 100%;">
<div>
<textarea id="list">A01 A03 A04 A05 A06 A07 A09 A10 B02 B03 B04 B06 B07 B09 B10 C01 C02 C03 C04 C05 C07 C09 C10 D01 D02 D03 D04 D05 D06 D07 D08 D09 E02 E03 E04 E05 E08 E09 E10</textarea>
</div>
<button class="but" id="make">設定</button>
<button class="but" id="play">抽籤</button>
<button class="but R" id="win">中獎者<br><span>？？？</span></button>
</div>
<div id="main">
<!-- <div class="outer"><div><span class="inner">A01</span></div></div>
<div class="outer"><div><span class="inner">A03255</span></div></div>
<div class="outer"><div><span class="inner">hello</span></div></div>
<div class="outer"><div><span class="inner">超長中文字，你咬我啊！</span></div></div>
-->
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
window.ing=0;
window.c=0;
window.stop=0;
$(function(){
var $inner = $('.inner');
var innerLength = $inner.length;
var i = 0;
for(i = 0; i < innerLength; i++){
(function(){
if($($inner[i]).width() >= 120){
$($inner[i]).css('font-size',parseInt($($inner[i]).css('font-size'))-1 + 'px');
arguments.callee();
}
})();
}
});
$("#make").on("click",function(){
$(".outer").remove();
$("#list").val().split(" ").forEach(function(b){$( "#main" ).append( '<div class="outer A"><div><span class="inner">'+b+'</span></div></div>' );});
$(".outer").on("click",function(){
var b=$(this);
if(!~b.attr("class").indexOf("B"))
b.attr("class","outer B");
else
b.attr("class","outer A");
});
});
$("#play").on("click",function(){
if(!ing){
window.i=1;
console.log("go");
stop=0;
ing=window.setInterval(function(){
//$(".A").atrr("class","outer C");
if(stop==0 || stop++%100==0){
$("#win span").text(i);
c=(i % $(".A").length);
console.log(i,c);
if(c>0)
$(".A")[c-1].setAttribute("class","outer A C");
else
$(".A")[$(".A").length-1].setAttribute("class","outer A C");
if(c==1)
$(".A")[$(".A").length-1].setAttribute("class","outer A");
else if(c==0)
$(".A")[$(".A").length-2].setAttribute("class","outer A");
else
$(".A")[c-2].setAttribute("class","outer A");
i++;
}
}, 15);
}else{
window.setTimeout(function(){
console.log("stop");
stop=1
window.clearInterval(ing);
$("#win span").text($(".C div span").text());
$(".C").attr("class","outer B");
ing=0;
stop=1;
},500);
}
});
</script>
</body>
</html>