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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery简易手风琴插件的封装
Oct 13 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 什么是PEAR?(第二篇)
2009/03/19 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python多进程控制学习小结
2018/10/31 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python中Django文件上传方法详解
2020/08/05 Python
python 基于wx实现音乐播放
2020/11/24 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
护士感人事迹
2014/05/01 职场文书
企业口号大全
2014/06/12 职场文书
党员进社区活动总结
2015/05/07 职场文书
2015年国培研修感言
2015/08/01 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL