本文实例讲述了jQuery基于随机数解决中午吃什么去哪吃问题。分享给大家供大家参考,具体如下:
一个解决中午吃什么去哪吃的程序
这下不用每天都纠结吃什么了!
代码功能类似于前面一篇《jQuery实现的老虎机跑动效果》,很有意思
<>强例一:
& lt; html>
& lt; head>
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
# bigDiv div {
高度:50 px;
宽度:50 px;
浮:左;
背景颜色:红色;
margin-left: 5 px;
可见性:隐藏;
}
# bigDiv p {
margin-left: 10 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=bigDiv>
& lt; div> & lt; p>吃面& lt;/p> & lt;/div>
& lt; div> & lt; p>吃饭& lt;/p> & lt;/div>
& lt; div> & lt; p>兰州& lt;/p> & lt;/div>
& lt; div> & lt; p>随便& lt;/p> & lt;/div>
& lt; div> & lt; p>炒饭& lt;/p> & lt;/div>
& lt; div> & lt; p>一期& lt;/p> & lt;/div>
& lt; div> & lt; p>二期& lt;/p> & lt;/div>
& lt; div> & lt; p>全家& lt;/p> & lt;/div>
& lt; div> & lt; p>西北& lt;/p> & lt;/div>
& lt; div> & lt; p>谢谢& lt;/p> & lt;/div>
& lt;/div>
& lt; br/祝辞& lt; br/祝辞& lt; br/祝辞& lt; br/比;
& lt;输入类型="按钮" id=" startBtn " value=" https://www.yisu.com/zixun/开始”比;
& lt;输入类型="按钮" id=" confirmBtn " value=" https://www.yisu.com/zixun/确定”比;
& lt;脚本语言=癹avascript”比;
var allDiv=$ (" # bigDiv”); (" div ");
var t;
函数startRun () {
var指数=11;
美元(allDiv) . each(函数(我){
if ($ () . css(“可见性”)!=耙亍?{
指数=我;
}
});
如果(指数==11){
指数=方法(9 * math . random ());
}
$ (allDiv) .eq(索引). css(“可见性”、“可见”);
setTimeout(函数(){stepRun(指数);},50);
}
函数stepRun(指数){
if ($ (allDiv) .eq(索引). css(“可见性”)!=耙亍?
{
$ (allDiv) .eq(索引). css(“可见性”、“隐藏”);
如果(指数==9){
$ (allDiv) .eq (0) . css(“可见性”、“可见”);
t=setTimeout(函数(){stepRun (0)}, 50);
其他}{
$ (allDiv) .eq(指数+ 1). css(“可见性”、“可见”);
t=setTimeout(函数(){stepRun(+ +指数)},50);
}
}
}
stopRun()函数
{
clearTimeout (t);
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果:
<>强例二:单按钮实现
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
# bigDiv div {
高度:50 px;
宽度:50 px;
浮:左;
背景颜色:红色;
margin-left: 5 px;
可见性:隐藏;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div=爸行摹痹诙云?
& lt; div id=bigDiv>
& lt; div> & lt; p>火锅& lt;/p> & lt;/div>
& lt; div> & lt; p>依鲜& lt;/p> & lt;/div>
& lt; div> & lt; p>兰州& lt;/p> & lt;/div>
& lt; div> & lt; p>随便& lt;/p> & lt;/div>
& lt; div> & lt; p>炒饭& lt;/p> & lt;/div>
& lt; div> & lt; p>一期& lt;/p> & lt;/div>
& lt; div> & lt; p>二期& lt;/p> & lt;/div>
& lt; div> & lt; p>全家& lt;/p> & lt;/div>
& lt; div> & lt; p>西北& lt;/p> & lt;/div>
& lt; div> & lt; p>谢谢& lt;/p> & lt;/div>
& lt;/div>
& lt; br/祝辞& lt; br/祝辞& lt; br/祝辞& lt; br/比;
& lt;输入类型="按钮" id=" startBtn " value=" https://www.yisu.com/zixun/开始”比;
& lt;/div>
& lt;脚本语言=癹avascript”比;
var allDiv=$ (" # bigDiv”); (" div ");
var t;
var停止=true;
函数startRun () {
如果(停止){
$ (" # startBtn”)。瓦尔(“停止”);
var指数=11;//11取值范围是大于已有选项项数
美元(allDiv) . each(函数(我){
if ($ () . css(“可见性”)!=耙亍?{
指数=我;
}
});
如果(指数==11){
指数=方法(9 * math . random ());
}
$ (allDiv) .eq(索引). css(“可见性”、“可见”);
setTimeout(函数(){stepRun(指数);},50);
停止=false;
其他}{
$ (" # startBtn”)。瓦尔(“开始”);
clearTimeout (t);
停止=true;
}
}
函数stepRun(指数){
if ($ (allDiv) .eq(索引). css(“可见性”)!=耙亍?
{
$ (allDiv) .eq(索引). css(“可见性”、“隐藏”);
如果(指数==9){
$ (allDiv) .eq (0) . css(“可见性”、“可见”);
t=setTimeout(函数(){stepRun (0)}, 50);
其他}{
$ (allDiv) .eq(指数+ 1). css(“可见性”、“可见”);
t=setTimeout(函数(){stepRun(+ +指数)},50);
}
}
}
& lt;/script>
& lt;/body>
& lt;/html>
