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

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

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

6 Comments

Name *

E-mail *

Website

  1. MG

    有个叫精子的盆友也做过类似这种,不过他做的要复杂 。加了很多其他考虑因素,然后还在公司用上了。

  2. 山野愚人居

    这个不错,扒过去玩会!

  3. 日记

    很好的设计。

  4. ChoJemmy

    美貌与智慧并重的小蝴蝶

  5. Roogle

    现在人都懒到让机器来替自己做决定了么

  6. 灰常记忆

    才女一枚