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实现转动随机数抽奖效果的方法
本文实例讲述了jQuery实现转动随机数抽奖效果的方法.分享给大家供大家参考.具体实现方法如下: <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="jquery-1.6.2.min.js" type="text/jav
-
jQuery 插件实现随机自由弹跳气泡样式
一个基于jQuery的气泡动画插件,在指定区域上方(左/右)定时间隔产生气泡,然后随机水平速度进行仿自由落体运动.到达区域底部之后做弹跳运动,速度逐渐衰减.直至停止运动. 在线演示 安装方法 由于是基于jQuery的扩展插件,因此引入jQuery是必须的. 此外,还需引入插件自身的实现脚本. <scriptsrc="https://code.jquery.com/jquery-1.12.4.min.js"></script> <scriptsrc=&quo
-
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
本文实例讲述了jQuery实现的点赞随机数字显示动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play
-
jQuery实现的老虎机跑动效果示例
本文实例讲述了jQuery实现的老虎机跑动效果.分享给大家供大家参考,具体如下: 老虎机的跑动效果 注意需要自行引用jquery库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>老虎机</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&q
-
jQuery随机密码生成的方法
本文实例讲述了jQuery随机密码生成的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.extend({ password: function (length, special) { var iteration = 0; var password = ""; var randomNumber; if(special == undefined){ var special = false; } w
-
jquery输入数字随机抽奖特效的简单实现代码
简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 我们</title><base target="_blank" /&g
-
jquery——九宫格大转盘抽奖实例
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510
-
jquery+php随机生成红包金额数量代码分享
本文实例讲述了jquery+php实现的随机生成红包金额数量特效.分享给大家供大家参考.具体如下: jquery+php实现的随机生成红包金额数量特效是一段实现了可以将一定金额的钱生成多个不同金额的红包的效果代码,红包数量与金钱可以自己设定. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+ph
-
jquery 抽奖小程序实现代码
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序.最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识.(最终结果保存在:http://runjs.cn/detail/rq3bbhto,点击可查看效果) 下面先看一个简单的抽奖小程序的例子: html: <div class="g-lottery-box&quo