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程序设计有所帮助。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17