forked from Simpleyyt/jekyll-theme-next
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathDateRecord.html
85 lines (76 loc) · 4.39 KB
/
DateRecord.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #2a3852;
}
#box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 300px;
}
#box h1 {
letter-spacing: 3px;
font-weight: 500;
color: #fff;
/* font-size: 5px; */
}
#time {
display: flex;
flex-direction: row;
line-height: 50px;
}
#time span {
font-size: 20px;
color: #fff;
}
#time strong {
text-align: center;
margin-left: 20px;
background-color: #3f5174;
border-radius: 10px;
width: 70px;
height: 50px;
display: block;
}
</style>
</head>
<body>
<div id="box">
<h1> INITIAL TIME FOR LOVE:</h1>
<div id="time">
<span id="day">**天</span>
<strong><span id="hour">**时</span></strong>
<strong><span id="minute">**分</span></strong>
<strong><span id="second">**秒</span></strong>
</div>
</div>
<script src="common.js"></script>
<script>
var daySpan = my$('day');
var hourSpan = my$('hour');
var minuteSpan = my$('minute');
var secondSpan = my$('second');
TimeRow();
setInterval(TimeRow, 1000)
function TimeRow() {
var start = new Date('2021/10/5 0:13:0');
var end = new Date();
var time = getInterval(start, end);
setInnerText(daySpan, time.day+'天');
setInnerText(hourSpan, time.hour+'时');
setInnerText(minuteSpan, time.minute+'分');
setInnerText(secondSpan, time.second+'秒');
}
</script>
<script>
javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out'; context.fillStyle = 'rgba(0,0,0,'+10/100+')'; context.fillRect(0,0,canvas.width,canvas.height); context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;var count = 100;for(var i = 0 ;i<count;i++){var p = {};var angle = Math.floor(Math.random()*360);p.radians = angle * Math.PI / 180;p.x = sx;p.y = sy;p.speed = (Math.random()*5)+.4;p.radius = p.speed;p.size = Math.floor(Math.random()*3)+1;p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);p.brightness = Math.floor(Math.random()*31)+50;p.alpha = (Math.floor(Math.random()*61)+40)/100;particles.push(p);}}function drawFireworks() {clearCanvas();for(var i = 0 ;i<particles.length;i++){var p = particles[i];var vx = Math.cos(p.radians) * p.radius;var vy = Math.sin(p.radians) * p.radius + 0.4;p.x += vx;p.y += vy;p.radius *= 1 - p.speed/100;p.alpha -= 0.005;context.beginPath();context.arc(p.x, p.y, p.size, 0, Math.PI*2, false);context.closePath();context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';context.fill();}}document.addEventListener('mousedown', mouseDownHandler, false);})();
</script>
</body>
</html>