-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathCountdown.html
118 lines (95 loc) · 2.93 KB
/
Countdown.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
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
/*@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900");*/
body{
/* background-color: #000;*/
}
.container {
position: relative;
margin: auto;
overflow: hidden;
width: 650px;
height: 160px;
}
h1 {
/* font-family: "Lato", sans-serif;*/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Microsoft YaHei UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-align: center;
margin-top: 2em;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 5px;
color: #c4987a;
}
#timer {
color: #F6F4F3;
text-align: center;
text-transform: uppercase;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Microsoft YaHei UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: .7em;
letter-spacing: 5px;
}
.days, .hours, .minutes, .seconds {
display: inline-block;
padding: 20px;
width: 70px;
border-radius: 15px;
}
.days {
background: #444;
/* background: #202020;*/
/* background: #EF2F3C;*/
}
.hours {
background: #444;
/* background: #F6F4F3;*/
/* color: #c4987a;*/
}
.minutes {
background: #444;
/* background: #276FBF;*/
}
.seconds {
background: #444;
/* background: #F0A202;*/
}
.numbers {
/* font-family: "Montserrat", sans-serif;*/
color: #c4987a;
/* color: #183059;*/
font-size: 4em;
}
</style>
<style type="text/css">.tb960x90,.tb300x250{display:none!important;display:none}</style></head>
<body>
<div class="container">
<div id="timer"><div class="days"> <div class="numbers">0</div>天</div> <div class="hours"> <div class="numbers">0</div>小时</div> <div class="minutes"> <div class="numbers">0</div>分钟</div> <div class="seconds"> <div class="numbers">0</div>秒</div> </div>
<!-- <h1>4th of july counter</h1>-->
</div>
<script>
const fourthOfJuly = new Date("September 13, 2018 01:00:00").getTime();
// countdown
let timer = setInterval(function() {
// get today's date
const today = new Date().getTime();
// get the difference
const diff = fourthOfJuly - today;
// math
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
// display
document.getElementById("timer").innerHTML =
"<div class=\"days\"> \
<div class=\"numbers\">" + days + "</div>天</div> \
<div class=\"hours\"> \
<div class=\"numbers\">" + hours + "</div>小时</div> \
<div class=\"minutes\"> \
<div class=\"numbers\">" + minutes + "</div>分钟</div> \
<div class=\"seconds\"> \
<div class=\"numbers\">" + seconds + "</div>秒</div> \
</div>";
}, 1000);</script>
<div id="download_plus_animation"></div></body></html>