今晚吃啥呢?——随机摇饭店前后端代码

久违的技术文!
最近每天晚上都在纠结到底去哪儿吃呢,百般折磨下终于决定写个页面替自己做决定!

HTML部分:

<!DOCTYPE html">
<head>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>吃啥呢!中关村version!</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/就是它.js"></script>
</head>
<body>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
   /**
* what2eat
* coder:
* 2017-11-03
*/

<h1 style="color:#40AA53">吃啥呢!</h1> <div id="board"> <div id="Result" style="color:#40AA53"> <span id="ResultNum">0</span> </div> </div> <div id="Button"> <input type='button' id="btn" value='开始' onclick='beginRndNum(this)'/> </div> <div id="footer"> © 2017 小蝴蝶 </div> </body> </html>

JS部分:

其实就是random一个数组,和随机摇数字的原理一样,只不过把数字改成数组的下标就可以了。

var g_Interval = 1;
var g_PersonCount = 25;
var g_Timer;
var running = false;
   /**
* what2eat
* coder:
* 2017-11-03
*/

function beginRndNum(trigger){ if(running){ running = false; clearTimeout(g_Timer); $(trigger).val("开始"); $('#ResultNum').css('color','#00cc75'); } else{ running = true; $('#ResultNum').css('color','black'); $(trigger).val("停止"); beginTimer(); } } function updateRndNum(){ var arr=[ "云端", "粤菜", "嘉和一品", "杜小月", "西少爷", "心泰心厨", "热啊", "跃界", "渝是乎", "萨莉亚", "宏状元", "外婆家", "鳗鱼饭", "面香" ] var num = Math.floor(Math.random()*g_PersonCount+1); var num2 = arr[num];//把random出来的数字变成数组下标 $('#ResultNum').html(num2); } function beginTimer(){ g_Timer = setTimeout(beat, g_Interval); } function beat() { g_Timer = setTimeout(beat, g_Interval); updateRndNum(); }

CSS部分

body{
 background-color:#fff;
 text-align:center;
 padding-top:50px;
 }
 
#board {
 position: relative;
 margin: 50px auto;
 width: 280px;
 padding: 33px 25px 29px;
 background: white;
 border-bottom: 1px solid #c4c4c4;
 border-radius: 5px;
 -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

#Result{
 margin:0 auto;
 text-align:center;
 padding:50px 0; 
 }
   /**
* what2eat
* coder:
* 2017-11-03
*/

#Result:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: #c4e17f; border-radius: 5px 5px 0 0; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); } #ResultNum{ font-size:50pt; font-family:Verdana } #Button{ margin:50px 0 0 0; } #Button input{ font-size:30px; padding:0 ; background-color: #2ecc71; box-shadow: 0px 5px 0px 0px #15B358; outline:none; } #Button input:hover { background-color: #48E68B; outline:none; } #Button input:active { transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); box-shadow: 0px 1px 0px 0px; outline:none; } #btn{ background-color:#40AA53; border:1px solid #40AA53; width:200px; height:65px; margin:0em auto; font-size:1em; border-radius:10px; color:#FFF; -webkit-appearance:none; -moz-appearance:none } #footer { margin-top: 100px; border-top: 1px solid #ccc; padding: 20px 0; color: #ccc; }

DEMO: http://xiaohudie.net/ms/what2eat/index.html

Snipaste_2017-11-03_14-59-13

19 Comments

Name *

E-mail *

Website

  1. Dick Wu

    扒走了,每天最纠结的就是这个。

  2. fefa

    路过

  3. 郑永

    确定你已经失踪了。。。qq都联系不上。。还是微信厉害。

  4. JJlin

    chick 了五次,有三次是粤菜,那是为什么?

  5. 鲜活

    吃个饭 真纠结 哈哈

  6. 张衡Henry

    我是19年第一个评论的啊,你解决了一个世界性难题,厉害。

  7. 郑永

    2019年最后几天路过这里。

  8. wu先生

    这是2017年,哈哈。

  9. chojemmy

    喊你回来更新博客