jQuery基于随机数解决中午吃什么去哪吃问题示例
更新时间：2018年12月29日 10:27:38 作者：csmzl
这篇文章主要介绍了jQuery基于随机数解决中午吃什么去哪吃问题,涉及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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了jQuery实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
如何选择input框，方法貌似有很多，而在jquery中有个相当简单不错的方法，在下面为大家介绍下详细的实现，希望大家可以练练手哦2013-09-09
jquery随意添加移除html的实现代码，需要的朋友可以参考下。2011-06-06
jQuery EasyUI API 中文文档 - Calendar日历使用
jQuery EasyUI API 中文文档 - Calendar日历使用，需要的朋友可以参考下。2011-10-10
这篇文章主要为大家详细介绍了jQuery基本筛选选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
此作品是一款jquery+html5实现的时钟插件clock，效果非常棒，推荐给大家参考下，小伙伴们可以直接拿走使用。2015-04-04
最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些jquery选择器、属性设置用法，供大家参考2013-09-09
下面小编就为大家带来一篇当jquery ajax遇上401请求的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章分享了一份jquery动画效果学习笔记，针对jquery动画效果进行细致解析，对淡入淡出效果、滑动效果进行原理讲解，想要学好jquery动画效果，就耐心阅读本文，相信大家会有意想不到的收获。2015-11-11
这篇文章主要是对jquery中Tab效果和动态加载的简单实例进行了介绍，需要的朋友可以过来参考下。希望对大家有所帮助2013-12-12
最新评论