1 Star 2 Fork 3

mokeyjay / chishenme

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
index.html 7.43 KB
Copy Edit Web IDE Raw Blame History
mokeyjay authored 2016-08-10 10:52 . 闲来无事刷一下版本号
<!-- 前端萌新的练手作品 QwQ -->
<!-- 博客: http://mokeyjay.com -->
<!-- 这个博客将会集技术、ACG、日常、分享于一身,如果你喜欢,常来玩哦 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超能小紫 - 今天吃什么 v1.1</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
*{font-family: "Microsoft YaHei"}
body{width: 100%; height: 100%; overflow: hidden;}
button{outline: none !important;}
.span{display: block; opacity: 0; position: absolute; cursor: default; }
#title{color: #bbb; text-align: center; margin-bottom: 30px; cursor: default; background-color: rgba(255, 255, 255, .5)}
#order{text-align: center; margin-bottom: 30px; font-size: 26px; cursor: default; background-color: rgba(255, 255, 255, .5)}
#btn{width: 150px;margin: 40px auto; display: table;}
#setting{ position: fixed; bottom: 20px; right: 20px; z-index: 999; }
</style>
</head>
<body>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4" style="z-index: 999">
<h2 id="title">今天吃什么?</h2>
<div id="order" class="text-primary">&nbsp;</div>
<button id="btn" type="button" class="btn btn-default btn-lg">开始</button>
</div>
<div class="col-xs-4"></div>
</div>
<!--设置框-->
<button id="setting" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-cog"></span>
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">菜名设置</h4>
</div>
<div class="modal-body">
<textarea rows="20" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
/**
* 取范围随机数
* @param min
* @param max
* @returns {Number}
*/
function rand(min, max){
return parseInt(Math.random() * (max - min + 1) + min);
}
// 菜单
menu = [];
/**
* 读取菜单
*/
function read_menu(){
if(localStorage){
var m = localStorage.chishenme_menu;
if(m == null){
menu = ["酸辣土豆丝", "可乐鸡翅", "麻婆豆腐", "红烧肉", "糖醋排骨", "西红柿炒鸡蛋", "青椒炒肉丝", "鱼香肉丝", "水煮肉片", "西红柿炖牛腩", "菠萝咕噜肉", "咖喱鸡翅", "香辣牛肉", "水煮鱼", "酸菜鱼", "虾皮鸡蛋羹", "皮蛋拌豆腐", "清蒸大闸蟹","微波番茄虾", "麻辣鱼", "宫保鸡丁", "家常豆腐", "皮蛋瘦肉粥", "红烧冬瓜", "湘式小炒五花肉", "剁椒鱼头", "红烧鱼块", "清蒸鲈鱼", "酸辣汤", "秘制红焖羊肉", "酱牛肉", "蒜苔炒腊肉", "杭椒牛柳", "红烧排骨", "泡菜炒年糕", "西红柿鸡蛋","土豆炖牛肉", "回锅肉", "木须肉", "水晶猪皮冻", "莲藕炖排骨", "鱼香茄子", "地三鲜", "京酱肉丝", "苦瓜炒蛋", "啤酒鸭", "西红柿鸡蛋汤", "红烧茄子", "干煸豆角", "糖醋鱼", "冬瓜排骨汤", "凉拌黄瓜", "鱼头豆腐汤", "银耳莲子汤","清蒸鱼", "葱油饼", "米汤鸡蛋羹", "蚂蚁上树", "干煸菜花", "香辣干锅土豆片", "黄豆芽炒粉条", "卤牛肉", "苦瓜鸡蛋", "盐烤花生米", "香辣虾", "小鸡炖蘑菇", "蛋黄小米粥", "杏仁瓦片", "蜜汁叉烧排骨", "栗子红烧肉", "酸豆角炒鸡胗", "干煸四季豆","尖椒土豆丝", "青椒土豆丝", "蒜香排骨", "香辣烤凤爪", "青椒炒肉", "酸萝卜老鸭汤", "葱爆羊肉", "虫草花豆腐汤", "酸辣蕨根粉", "黄豆炖猪蹄", "家常葱油饼", "辣子鸡", "盐水毛豆", "牙签肉", "避风塘炒蟹", "五香毛豆", "腊味煲仔饭","黑芝麻糊", "炸藕盒", "糯米枣", "肉末香菇豆腐", "洋葱拌木耳", "黄金玉米烙", "黄瓜拌粉皮", "白灼虾", "梅干菜干煸豆角", "小炒圆白菜", "家常红烧牛肉", "炸酱面", "肉末酸豆角", "鲜橙蒸蛋", "辣椒油", "南瓜蒸百合", "酸辣黄瓜", "家常烧茄子"];
} else {
menu = JSON.parse(m);
}
} else {
menu = [""];
}
}
animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
handle = null; // 随机菜色计时器
$(function(){
body = $('body');
width = $(window).width();
height = $(window).height();
order = $('#order');
btn = $('#btn');
textarea = $('textarea');
// 上下居中
$('#title').css('margin-top', height/2-150);
read_menu();
// 随机背景
setInterval(function(){
var i = Math.floor(Math.random() * menu.length + 1)-1;
$('<span class="span">'+menu[i]+'</span>')
.css({"top":rand(0, height), "left":rand(0, width), "font-size":rand(20, 40)})
.css('color', 'rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.'+rand(3,9)+')')
.appendTo(body)
.addClass('animated fadeIn')
.one(animationEnd, function(){
$(this).removeClass('fadeIn').addClass('fadeOut').one(animationEnd, function(){
$(this).remove();
});
});
}, 100);
// 按钮事件
btn.on('click', function(){
if(handle == null){
btn.text('停止');
handle = setInterval(function(){
var i = Math.floor(Math.random() * menu.length + 1)-1;
order.text(menu[i]);
}, 50);
} else {
btn.text('开始');
clearInterval(handle);
handle = null;
}
});
// 菜名设置
for(var i in menu){
textarea.html(textarea.html()+menu[i]+"\n");
}
// 保存事件
$('#save').on('click', function(){
if(localStorage){
var text = textarea.val().split("\n");
// 去除空菜名
var cai = [];
for(var i in text){
if(text[i] != ''){
cai.push(text[i]);
}
}
localStorage.chishenme_menu = JSON.stringify(cai);
read_menu();
} else {
alert('你的浏览器不支持localStorage,无法保存菜单!');
}
$('#myModal').modal('hide');
});
});
</script>

Comment ( 1 )

Sign in to post a comment

JavaScript
1
https://git.oschina.net/mokeyjay/chishenme.git
git@git.oschina.net:mokeyjay/chishenme.git
mokeyjay
chishenme
chishenme
master

Search

184635 d8eb8a04 1850385 161156 f1cf3f24 1850385