提交 b4890078 编写于 作者: Metz's avatar Metz

新增项目

上级 50703079
html {
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:#EEE url(bg.jpg);
font-family: "微软雅黑";
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -250px;
width: 500px;
height: 120px;
text-align: center;
}
#wrapper h1 {
margin: 0 0 20px;
padding: 0;
font-weight: 300;
font-size: 30px;
}
#wrapper h1 b{
font-weight: 700;
}
#start {
width: 150px;
height: 27px;
text-align: center;
line-height: 27px;
border-radius: 5px;
margin:0 auto;
color: white;
user-select: none;
-webkit-user-select: none;
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes greenPulse {
from {
background-color: #749a02;
-webkit-box-shadow: 0 0 9px #333;
}
50% {
background-color: #91bd09;
-webkit-box-shadow: 0 0 18px #91bd09;
}
to {
background-color: #749a02;
-webkit-box-shadow: 0 0 9px #333;
}
}
#cfg {
color: #666;
text-shadow: 1px 1px 1px #eee;
font-size: 12px;
cursor: pointer;
}
.temp {
position: absolute;
z-index: -1;
color: #777;
}
#popbox {
position: absolute;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -210px;
padding: 0 10px;
width: 400px;
height: 280px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #fff;
-webkit-box-shadow: 0 0 22px #333, inset 0 -3px 7px #DDD;
-moz-box-shadow: 0 0 22px #333, inset 0 -3px 7px #DDD;
box-shadow: 0 0 22px #333, inset 0 -3px 7px #DDD;
+border: 1px solid #666;
}
#ok {
float: right;
margin: -3px 0 0;
color: #666;
cursor: pointer;
width: 50px;
height: 22px;
}
#weibo {
position: absolute;
bottom: 15px;
right: 15px;
}
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>中午吃什么</title>
<meta name="keywords" content="中午吃什么" />
<meta name="description" content="中午吃什么" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="default.css">
</head>
<body>
<div id="wrapper">
<h1 style="color: #4b80f4">
中午吃什么,吃什么?
<br>
<br>
<b style="color:#FF9733" id="what"></b>
</h1>
<div id="start">开始</div>
</div>
<textarea rows="9" cols="53" id="list" style="display:none">
馄饨 拉面 烩面 热干面 刀削面 油泼面 炸酱面 炒面 米线 土豆粉 螺狮粉 凉皮儿 麻辣烫 肉夹馍 羊肉汤 炒饭 卤肉饭 烤肉饭 黄焖鸡米饭 驴肉火烧 川菜 火锅 烤串 披萨 烤鸭 汉堡 炸鸡
</textarea>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="random.js"></script>
</body>
</html>
# preview.yml
autoOpen: false # 打开工作空间时是否自动开启所有应用的预览
apps:
- port: 5500 # 应用的端口
run: npm i && npm run dev # 应用的启动命
command: # 使用此命令启动服务,且不执行run
root: ./ # 应用的启动目录
name: EatWhat # 应用名称
description: 午饭吃什么 # 应用描述
autoOpen: true # 打开工作空间时是否自动开启预览(优先级高于根级 autoOpen
/**
* Created by fangzide on 16/9/5.
*/
$(function () {
var run = 0,
heading = $("h1"),
timer;
$("#start").click(function () {
var list = $("#list").val().replace(/ +/g, " ").replace(/^ | $/g, "").split(" ");
if (!run) {
heading.html(heading.html().replace("吃这个!", "吃什么?"));
$(this).html("停止");
timer = setInterval(function () {
var r = Math.ceil(Math.random() * list.length),
food = list[r - 1];
$("#what").html(food);
var rTop = Math.ceil(Math.random() * $(document).height()),
rLeft = Math.ceil(Math.random() * ($(document).width() - 50)),
rSize = Math.ceil(Math.random() * (37 - 14) + 14);
$("<span class='temp'></span>").html(food).hide().css({
"top": rTop,
"left": rLeft,
"color": "rgba(0,0,0,." + Math.random() + ")",
"fontSize": rSize + "px"
}).appendTo("body").fadeIn("slow", function () {
$(this).fadeOut("slow", function () {
$(this).remove();
});
});
}, 50);
run = 1;
} else {
heading.html(heading.html().replace("吃什么?", "吃这个!"));
$(this).html("不行,换一个");
clearInterval(timer);
run = 0;
};
});
document.onkeydown = function enter(e) {
var e = e || event;
if (e.keyCode == 13) $("#start").trigger("click");
};
});
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册