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

本文实例讲述了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代码运行工具：测试上述代码，可得如下运行效果：

例二：单按钮实现

<!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代码运行工具：测试上述代码，可得如下运行效果：