jQuery基于随机数解决中午吃什么去哪吃问题示例


Posted in jQuery onDecember 29, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

jQuery基于随机数解决中午吃什么去哪吃问题示例

例二:单按钮实现

<!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.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

jQuery基于随机数解决中午吃什么去哪吃问题示例

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

jQuery 相关文章推荐
jQuery表单验证之密码确认
May 22 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
pandas.cut具体使用总结
2019/06/24 Python
python打开音乐文件的实例方法
2020/07/21 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
运动会广播稿200字
2014/01/15 职场文书
材料会计岗位职责
2014/03/06 职场文书
三字经教学反思
2014/04/26 职场文书
监察建议书格式
2014/05/19 职场文书
西湖英语导游词
2015/02/06 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书