hellopgrmm.github.io/Calendar.html at main · hellopgrmm/hellopgrmm.github.io · GitHub

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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>电子台历-Hello Programming</title>
<link href="https://hellopgrmm.github.io/tools/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src='https://hellopgrmm.github.io/tools/jquery-ui.js'></script>
</head>
<body bgcolor='orange'>
<style>
@font-face
{
    font-family:trebuc;
    src:url(https://hellopgrmm.github.io/font/TREBUC.TTF)
}
body
{
    font-family:trebuc;
}
h1,a
{
    color:white;
}
#Month-Week
{
    font-size:3em;
}
#Date-Time
{
    font-size:2em;
}
#Day
{
    font-size:17em;
}
#MainDate
{
    width:30%;
}
@media only screen and (max-width : 725px){
    #Month-Week{
        font-size:1.5em;
    }
    #Day
    {
        font-size:5em;
    }
    #Date-Time
    {
        font-size:1em;
    }
    #MainDate
    {
        width:90%;
    }
}
@media only screen and (max-width : 1000px){
    #Month-Week{
        font-size:2em;
    }
    #Day
    {
        font-size:8em;
    }
    #Date-Time
    {
        font-size:2em;
    }
    #MainDate{
        width:90%;
    }
}
</style>
<center><div id='MainDate'>
<h1 id='Month-Week' style='display:none;'>1月 | 星期一</h1>
<a id='Day' style='display:none;'>01</a><br><a style='display:none;' id='Date-Time'>1970年1月1日 0:00:00</a><br><hr id='mmhr' style='display:none'><a style='display:none' id='Sentence'>新的一天，新的开始，让我们一起努力成为更好的自己💪。</a>
</div>
<script>
$('#Month-Week').show('drop',1000);
$('#Day').show('drop',1000);
setTimeout("$('#Date-Time').fadeIn(1000);$('#mmhr').fadeIn(1000);$('#Sentence').fadeIn(1500);",1000);
var ColorArray = ['blue','green','#00caca','orange','#02df82','purple','red','#b15bff','#e1e100','#8cea00','#eb4f4f','#ff8000'];
function updateTime()
{
    var m = new Date();
    var m2 = m.getMonth()+1;
    document.querySelector('body').style.background = ColorArray[m2-1];
    switch(m.getDay()){
        case 1:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期一";break;
        case 2:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期二";break;
        case 3:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期三";break;
        case 4:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期四";break;
        case 5:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期五";break;
        case 6:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期六";break;
        case 0:document.getElementById('Month-Week').innerHTML = m2+"月 | 星期日";break;
    }
    Day.innerHTML = m.getDate();
    document.getElementById('Date-Time').innerHTML = m.getYear()+1900 + '年<br>' + m.getHours() + ':' + m.getMinutes() + ':' + m.getSeconds();
}
setInterval('updateTime();',1)
</script>