晚上吃什么呢？

2018年7月29日21:02:17 6 阅读(2,767)

你是否不知道晚上吃啥？你是否想吃某个范围的事物但是不知道选哪个？本文帮你解决这个问题 [酷]

主要原理就是计时器+random一个数组，效果如图所示：

晚上吃什么呢？

HTML部分

  1. <h1 style="color:#40AA53; text-align:center;">吃啥呢！</h1>
  2. <div id="wrapper">
  3.     <div id="Result" style="color:#40AA53">
  4.         <span id="what">0</span>
  5.     </div>
  6. </div>
  7. <div id="Button">
  8.     <input type="button" id="start" value="不行，换一个">
  9. </div><br/>
  10. <p><span id="cfg" title="编辑候选菜单">{ 自定义候选菜单 }</span></p>
  11.      <div id="popbox-wrapper">
  12.          <div id="popbox">
  13.              <h3>食物菜单</h3>
  14.              <textarea rows="7" cols="51" id="list" placeholder="在这里输入候选食物，食物之间以空格分开..."></textarea><input type="button" value="确定" id="ok" class="btn btn-primary"/>
  15.          </div>
  16.      </div>
  17. <script src="script.js"></script>

JS部分

  1. $(function () {
  2.     var running = 0,
  3.         h1 = $("h1"),
  4.         h1b4 = $("span", h1).eq(0),
  5.         h1a5 = $("span", h1).eq(-1),
  6.         what = $("#what"),
  7.         btn = $("#start"),
  8.         popup = $("#popbox-wrapper"),
  9.         list = $("#list"),
  10.         book = [
  11.             "输入候选食物"]
  12.         times = 0,
  13.         hour = (new Date).getHours();
  14.     btn.val("开始").removeAttr("disabled").click(function () {
  15.         var l = list.val().replace(/ +/g, " ").replace(/^ | $/g, "").split(" ");
  16.         if (l.length == 1 && l[0] != "") return alert("→_→ 耍我是吧，一个有什么好选的！");
  17.         if (l.length == 1) return alert("啥也没有，吃西北风去啊？");
  18.         if (!running) {
  19.             times++;
  20.             if (times == 3) {
  21.                 $("<span class='tip'>都不想吃？可以编辑菜单的哦！</span>").css({
  23.                     opacity: 0
  24.                 }).appendTo("#wrapper").animate({
  25.                     left: "-=10px",
  26.                     opacity: 1
  27.                 });
  28.                 btn.val("继续");
  29.                 $("#cfg").add(btn).one("click", function () {
  30.                     $(".tip").animate({
  31.                         left: "+=10px",
  32.                         opacity: 0
  33.                     }, function () {
  34.                         $(this).remove();
  35.                     });
  36.                 });
  37.                 return false;
  38.             };
  39.             $(this).val("停止");
  40.             timer = setInterval(function () {
  41.                 var r = MOFUN.random(l.length),
  42.                     food = l[r - 1],
  43.                     rTop = MOFUN.random($(document).height() - 100),
  44.                     rLeft = MOFUN.random($(document).width() - 50),
  45.                     rSize = MOFUN.random(37, 14);
  46.                 what.html(food);
  47.                 $("<span class='temp'>" + food + "</span>").css({
  48.                     "display": "none",
  49.                     "top": rTop,
  50.                     "left": rLeft,
  51.                     "color": "rgba(0,0,0,." + Math.random() + ")",
  52.                     "fontSize": rSize + "px"
  53.                 }).appendTo("body").fadeIn("slow", function () {
  54.                     $(this).fadeOut("slow", function () {
  55.                         $(this).remove();
  56.                     });
  57.                 });
  58.             }, 60);
  59.             running = 1;
  60.             $("#shareto").fadeOut(function () {
  61.                 $(this).remove()
  62.             });
  63.         } else {
  64.             btn.val("不行，换一个");
  65.             clearInterval(timer);
  66.             running = 0;
  67.         };
  68.     });
  69.     h1.click(function () {
  70.         if (!running) {
  71.             h1.css("position", "relative").stop().animate({
  72.                 left: "-20px"
  73.             }, 50).animate({
  74.                 left: "20px"
  75.             }, 50).animate({
  76.                 left: "-10px"
  77.             }, 50).animate({
  78.                 left: "10px"
  79.             }, 50).animate({
  80.                 left: "-5px"
  81.             }, 50).animate({
  82.                 left: "5px"
  83.             }, 50).animate({
  84.                 left: 0
  85.             }, 50, function () {
  86.                 $(this).removeAttr("style");
  87.             });
  88.         };
  89.     });
  90.     $("#cfg").click(function () {
  91.         running ? alert("还在选呢！") : popup.fadeIn(function () {
  92.             var t = list.val();
  93.             list.focus().val("").val(t)
  94.         });
  95.     });
  96.     $("#ok").click(function () {
  97.         popup.fadeOut();
  98.     });
  99.     if (hour < 9 || hour >= 23) {
  100.         change(0);
  101.     } else if (hour < 13) {
  102.         change(1);
  103.     };
  104.     function change(i) {
  105.         i = i || 0;
  106.         $("<i class='notdinner'></i>").css({
  107.             top: "-44px",
  108.             opacity: 0
  109.         }).appendTo("#wrapper").animate({
  110.             top: "+=10px",
  111.             opacity: 1
  112.         }, 1e3).delay(6e3).fadeOut("slow", function () {
  113.             $(this).remove();
  114.         });
  115.         list.val(book[i][1]);
  116.         var t = i + 1;
  117.         while (t > 0) {
  118.             book.push(book.shift());
  119.             t--;
  120.         };
  121.     };
  122.     document.onkeydown = function (e) {
  123.         e = e || window.event;
  124.         if (e.keyCode == 32 && !popup.is(":visible")) $("#start").trigger("click");
  125.     };
  126. });

CSS部分

  1. body{
  2.     background-color:#fff;
  3.     text-align:center;
  4.     padding-top:50px;
  5. }
  7. #wrapper {
  8.     position: relative;
  9.     margin: 50px auto;
  10.     width: 365px;
  11.     padding: 33px 25px 29px;
  12.     background: white;
  13.     border-bottom: 1px solid #c4c4c4;
  14.     border-radius: 5px;
  15.     -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  16.     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  17. }
  19. #Result{
  20.     margin:0 auto;
  21.     text-align:center;
  22.     padding:50px 0;
  23. }
  24. #Result:before {
  25.     content: '';
  26.     position: absolute;
  27.     top: 0;
  28.     left: 0;
  29.     rightright: 0;
  30.     height: 8px;
  31.     background: #c4e17f;
  32.     border-radius: 5px 5px 0 0;
  33.     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);
  34.     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);
  35.     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);
  36.     background-image: linear-gradient(to rightright, #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);
  37. }
  38. #what{
  39.     font-size:50pt;
  40.     font-family:Verdana
  41. }
  42. #Button{
  43.     margin:50px 0 0 0;
  44. }
  46. #Button input{
  47.     font-size:30px;
  48.     padding:0 ;
  49.     background-color: #2ecc71;
  50.     box-shadow: 0px 5px 0px 0px #15B358;
  51.     outline:none;
  52. }
  54. #Button input:hover {
  55.     background-color: #48E68B;
  56.     outline:none;
  57. }
  58. #Button input:active {
  59.     transform: translate(0px, 5px);
  60.     -webkit-transform: translate(0px, 5px);
  61.     box-shadow: 0px 1px 0px 0px;
  62.     outline:none;
  63. }
  64. #start{
  65.     background-color:#40AA53;
  66.     border:1px solid #40AA53;
  67.     width:200px;
  68.     height:65px;
  69.     margin:0em auto;
  70.     font-size:1em;
  71.     border-radius:10px;
  72.     color:#FFF;
  73.     -webkit-appearance:none;
  74.     -moz-appearance:none
  75. }
  76. #footer {
  77.     margin-top: 100px;
  78.     border-top: 1px solid #ccc;
  79.     padding: 20px 0;
  80.     color: #ccc;
  81. }
  82. #popbox-wrapper{
  83.     position: absolute;
  84.     top: 0;
  85.     left: 0;
  86.     display: none;
  87.     width: 100%;
  88.     height: 100%;
  90. }
  91. #popbox{
  92.     position: absolute;
  93.     top: 50%;
  94.     left: 50%;
  95.     margin-top: -140px;
  96.     margin-left: -200px;
  97.     width: 400px;
  98.     height: 300px;
  99.     -webkit-border-radius: 5px;
  100.     -moz-border-radius: 5px;
  101.     border-radius: 5px;
  102.     background: #fff;
  103.     -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  104.     -moz-box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  105.     box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  106. +border: 5px solid #5D5D5C;
  107. }
  108. .ie8 #popbox { border: 5px solid #5D5D5C }
  109. #popbox h3{
  110.     margin: 0;
  111.     padding: 20px 0;
  112.     border-bottom: 1px solid #bbb;
  113.     -webkit-border-radius: 5px 5px 0 0;
  114.     -moz-border-radius: 5px 5px 0 0;
  115.     border-radius: 5px 5px 0 0;
  116.     background: #E7E7E7 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA7CAIAAAA1lncVAAAAIklEQVQI12P4//8/0////5kYGBjgNC42PnWkilHDDBLtAgC6y0sq4aOFWQAAAABJRU5ErkJggg==") repeat-x 0 100%;
  117.     color: #333;
  118.     text-align: center;
  119.     font-weight: 700;
  120.     font-size: 19px;
  121.     line-height: 1;
  122. }
  123. #popbox textarea{
  124.     overflow: auto;
  125.     margin: 10px;
  126.     width: 380px;
  127.     height: 160px;
  128.     border: 0;
  129.     background: #efefef;
  130.     font-size: 14px;
  131.     resize: none;
  132.     padding: 10px;
  133. }
  134. #cfg {
  135.     color: #666;
  136.     cursor: pointer;
  137. }
  138. #cfg:hover {
  139.     font-weight: 700;
  140. }
  141. .temp{
  142.     position: absolute;
  143.     z-index: -1;
  144.     color: #777;
  145. }

Demo：http://garden.haoht123.com/food

感谢

本文基于小蝴蝶的基础上添加了可以自定义候选菜单的功能以及一些效果。

小蝴蝶  ：今晚吃啥呢？——随机摇饭店前后端代码 

 

完。

 

weinxin
微信小程序
互联网开发，终身学习者，欢迎您的关注！
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗？ 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论：6   其中：访客  3   博主  3

    • 云柯博客 云柯博客 2
      回复 2018年8月16日 上午9:31   地板

      …… 我都想吃呢[帅吗？]

      • 懿古今 懿古今 3
        回复 2018年8月2日 下午9:27   板凳

        这才是生活，想吃啥就吃啥，而我是生存，想吃什么都要先看看口袋，然后还是喝白粥吧

          • 舍得 舍得
            回复 2018年8月2日 下午9:35

            @懿古今 你是以后的我。我现在是一人吃饱，全家不饿 [无奈哭]

          • Roogle Roogle 0
            回复 2018年8月1日 上午11:27   沙发

            选择困难症人的终极福利