점심 뭐 먹을지, 어디 가서 먹을지 해결하는 프로그램
21507 단어 JS 및 JQuery
이제 매일 뭘 먹을지 고민할 필요 없어!
<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>
예2: 단일 단추 구현
<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>
좋은 웹페이지 즐겨찾기
