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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 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 MVC留言本实例代码(必看篇)
2016/09/22 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
简单的python后台管理程序
2017/04/13 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
wxPython色环电阻计算器
2019/11/18 Python
Python多线程正确用法实例解析
2020/05/30 Python
如何利用find命令查找文件
2015/02/07 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
计算机个人求职信范例
2014/01/24 职场文书
美容院考勤制度
2014/01/30 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2014年维修工作总结
2014/11/22 职场文书
企业工会工作总结2015
2015/05/13 职场文书
金榜题名主持词
2015/07/02 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫