一個解決中午喫什麼去哪喫的程序
這下不用每天都糾結喫什麼了！
<html>
<head>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
<style type="text/css">
#bigDiv div{
height:50px;
width:50px;
float:left;
background-color:red;
margin-left:5px;
visibility: hidden;
}
#bigDiv p{
margin-left: 10px;
}
</style>
</head>
<body>
<div id = bigDiv>
<div><p>吃麪</p></div>
<div><p>喫飯</p></div>
<div><p>蘭州</p></div>
<div><p>隨便</p></div>
<div><p>炒飯</p></div>
<div><p>一期</p></div>
<div><p>二期</p></div>
<div><p>全家</p></div>
<div><p>西北</p></div>
<div><p>謝謝</p></div>
</div>
<br/><br/><br/><br/>
<input type="button" id="startBtn" value="開 始" onclick="startRun()">
<input type="button" id="confirmBtn" value="確 定" onclick="stopRun()">
<script language="javascript">
var allDiv = $("#bigDiv").find("div");
var t;
function startRun(){
var index = 11;
$(allDiv).each(function(i){
if($(this).css("visibility")!="hidden"){
index = i;
}
});
if(index == 11){
index = parseInt(9*Math.random());
}
$(allDiv).eq(index).css("visibility","visible");
setTimeout(function(){stepRun(index);},50);
}
function stepRun(index){
if($(allDiv).eq(index).css("visibility")!="hidden")
{
$(allDiv).eq(index).css("visibility","hidden");
if(index==9){
$(allDiv).eq(0).css("visibility","visible");
t = setTimeout(function(){stepRun(0)},50);
}else{
$(allDiv).eq(index+1).css("visibility","visible");
t = setTimeout(function(){stepRun(++index)},50);
}
}
}
function stopRun()
{
clearTimeout(t);
}
</script>
</body>
</html>
例二：單按鈕實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<style type="text/css">
#bigDiv div{
height:50px;
width:50px;
float:left;
background-color:red;
margin-left:5px;
visibility: hidden;
}
</style>
</head>
<body>
<div align="center">
<div style="display: inline-block;" id = bigDiv>
<div><p>火鍋</p></div>
<div><p>依鮮</p></div>
<div><p>蘭州</p></div>
<div><p>隨便</p></div>
<div><p>炒飯</p></div>
<div><p>一期</p></div>
<div><p>二期</p></div>
<div><p>全家</p></div>
<div><p>西北</p></div>
<div><p>謝謝</p></div>
</div>
<br/><br/><br/><br/>
<input type="button" id="startBtn" value="開 始" onclick="startRun()">
</div>
<script language="javascript">
var allDiv = $("#bigDiv").find("div");
var t;
var stop = true;
function startRun(){
if(stop){
$("#startBtn").val("停 止");
var index = 11;//11取值範圍是大於已有選項項數
$(allDiv).each(function(i){
if($(this).css("visibility")!="hidden"){
index = i;
}
});
if(index == 11){
index = parseInt(9*Math.random());
}
$(allDiv).eq(index).css("visibility","visible");
setTimeout(function(){stepRun(index);},50);
stop = false;
}else{
$("#startBtn").val("開 始");
clearTimeout(t);
stop = true;
}
}
function stepRun(index){
if($(allDiv).eq(index).css("visibility")!="hidden")
{
$(allDiv).eq(index).css("visibility","hidden");
if(index==9){
$(allDiv).eq(0).css("visibility","visible");
t = setTimeout(function(){stepRun(0)},50);
}else{
$(allDiv).eq(index+1).css("visibility","visible");
t = setTimeout(function(){stepRun(++index)},50);
}
}
}
</script>
</body>
</html>