jQuery基于随机数解决中午吃什么去哪吃问题示例
程序员文章站
2024-01-24 13:09:46
本文实例讲述了jquery基于随机数解决中午吃什么去哪吃问题。分享给大家供大家参考，具体如下：
一个解决中午吃什么去哪吃的程序
这下不用每天都纠结吃什么了！
代码功能...
本文实例讲述了jquery基于随机数解决中午吃什么去哪吃问题。分享给大家供大家参考，具体如下：
一个解决中午吃什么去哪吃的程序
这下不用每天都纠结吃什么了！
代码功能类似于前面一篇《jquery实现的*跑动效果》，很有意思
例一：
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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>
使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码，可得如下运行效果：
例二：单按钮实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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>
使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码，可得如下运行效果：
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery操作dom节点方法总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery表格(table)操作技巧汇总》、《jquery中ajax用法总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇： 自己编了一个mysql类。请指正
下一篇： ajax实现远程通信