快捷導(dǎo)航

jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問(wèn)題示例

更新時(shí)間：2018年12月29日 10:27:38 作者：csmzl

這篇文章主要介紹了jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問(wèn)題,涉及jQuery基于事件響應(yīng)及隨機(jī)數(shù)動(dòng)態(tài)操作頁(yè)面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問(wèn)題。分享給大家供大家參考，具體如下：

一個(gè)解決中午吃什么去哪吃的程序

這下不用每天都糾結(jié)吃什么了！

代碼功能類似于前面一篇《jQuery實(shí)現(xiàn)的老虎機(jī)跑動(dòng)效果》，很有意思

例一：

<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="開(kāi) 始" 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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：

例二：?jiǎn)伟粹o實(shí)現(xiàn)

<!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="開(kāi) 始" 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取值范圍是大于已有選項(xiàng)項(xiàng)數(shù)
          $(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("開(kāi) 始");
          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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：