-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
133 lines (119 loc) · 3.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<head>
<title>泡面盖子</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-wrapper {
text-align: center;
margin-top: 8px;
}
.pure-button {
font-family: inherit;
font-size: 100%;
padding: .5em 1em;
color: rgba(0, 0, 0, .8);
border: none transparent;
background-color: #e6e6e6;
text-decoration: none;
border-radius: 4px;
}
.pure-button-active {
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.l-box h3 {
text-align: center;
}
label {
margin-right: 15px;
line-height: 32px;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 20px;
height: 20px;
border: 2px solid #999;
transition: 0.2s all linear;
outline: none;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 10px solid black;
}
.type {
margin: 2%;
}
.img-wrapper {
text-align: center;
}
</style>
</head>
<body style="margin:2%;">
<h1 style="margin-top:16px;text-align: center;">泡面盖子！</h1>
<fieldset>
<legend>选择你的面:</legend>
<div class="type">
<input type="radio" id="type-1" name="type" value="3" checked>
<label for="type-1">三分钟：泡面类(口感较硬的泡面)</label>
</div>
<div class="type">
<input type="radio" id="type-2" name="type" value="4">
<label for="type-2">四分钟：粉丝类(酸辣粉，粉丝，口感较软的泡面)</label>
</div>
<div class="type">
<input type="radio" id="type-3" name="type" value="5">
<label for="type-3">五分钟：拌面类(重庆小面，麻酱凉皮)</label>
</div>
</fieldset>
<div class="btn-wrapper">
<button id="btn" class="pure-button pure-button-active" onclick="start()" type="button">Kindle已盖好，开始！</button>
</div>
<div>
<h1 id="Time" name="Time" style="text-align: center;"></h1>
<div class="img-wrapper">
<img id="OkImg" src="./ok.jpg" style="display:none;">
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script>
var jobId = 0;
var totalMilliSeconds = 0;
function start() {
$("#btn").text("泡面中~");
$("#btn").attr("disabled", true);
totalMilliSeconds = $("input:radio[name=type]:checked").val() * 60;
jobId = setInterval(function() {
// if (totalMilliSeconds <= 0) {
// clearInterval(jobId);
// }
totalMilliSeconds -= 1;
if (totalMilliSeconds == 0) {
$("#Time").text("");
$("#OkImg").show();
$("#btn").text("完成");
$("#btn").attr("disabled", false);
}
var minute = parseInt(totalMilliSeconds / 60);
var milliSeconds = totalMilliSeconds - 60 * minute;
$("#Time").text(minute + ":" + milliSeconds);
}, 1000)
}
</script>
</html>