网站优化

小程序的发展史_jQuery基于随机数解决正午吃什么

作者:admin 发布时间:2021-01-08
jQuery基于随机数解决中午吃什么去哪吃问题示例       这篇文章主要介绍了jQuery基于随机数解决中午吃什么去哪吃问题,涉及jQuery基于事件响应及随机数动态操作页面元素相关实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery基于随机数解决中午吃什么去哪吃问题。分享给大家供大家参考,具体如下:

一个解决中午吃什么去哪吃的程序

这下不用每天都纠结吃什么了!

代码功能类似于前面一篇《》,很有意思

例一:

 html 
 head 
 script src="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="开 始" 
 input type="button" id="confirmBtn" value="确 定" 
 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代码运行工具:测试上述代码,可得如下运行效果:

例二:单按钮实现

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 script src="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 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="开 始" 
 /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代码运行工具:测试上述代码,可得如下运行效果:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。



收缩