念念不忘的歌曲：That's Why You Go Away
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个特别的倒计时</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* 首页样式开始 */
.home_page {
position: fixed;
top: 0;
left: 600px;
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
font-size: 20px;
margin: 20px;
padding: 2px 5px;
border-radius: 5px;
text-decoration: none;
&:hover {
background-color: #e4f904;
color: rgb(245, 5, 5);
}
}
/* 首页样式结束 */
body {
background: radial-gradient(at 60% 0%, #5190b0, #235746);
}
/*************************现在时间*******************************/
.times {
min-height: 100vh;
}
#year {
position: absolute;
font-size: 70px;
left: 950px;
top: 50px;
transform: translate(-50%, -50%);
color: #fed330;
/*模糊 filter: blur(0.5vw); */
z-index: 1;
}
.main {
background: #000000;
position: absolute;
border-radius: 1vw;
left: 280px;
top: 520px;
font-size: 3vw;
position: absolute;
color: rgb(252, 4, 4);
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
border: 0px solid black;
span {
width: 4vw;
height: 90vh;
border: 2px solid white;
position: relative;
border: none;
}
.wan {
width: 15px;
}
.wai {
width: 50px;
}
.wan,
.wai {
position: relative;
top: -60px;
left: 3px;
}
span::before {
/* 直接注释掉这行 content: attr(datatext);就不可以显示时间数字哦 */
content: attr(datatext);
position: absolute;
top: -60px;
left: 3px;
}
span::after {
content: "";
position: absolute;
width: 100%;
box-sizing: border-box;
border: 2px solid transparent;
bottom: 0;
border-radius: 1vw 1vw 0 0;
filter: blur(2px);
transition: 1s linear;
height: var(--s);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
border: 0px solid black;
}
#month::after {
background: #8854d0;
}
#day::after {
background: #3867d6;
}
#hour::after {
background: #20bf6b;
}
#min::after {
background: #d1d8e0;
}
#sec::after {
background: #ff0101;
}
}
/* 刻度线 */
.list {
position: absolute;
left: 450px;
top: 72px;
height: 895px;
list-style: none;
/* counter-reset: num -2; */
/* counter-reset: num -1; */
width: 100px;
padding-inline-start: 0px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.list1 {
left: 370px;
}
.list2 {
left: 290px;
}
.list3 {
left: 190px;
}
.list3 {
left: 170px;
}
.list4 {
left: 60px;
}
.list>li {
width: 50px;
height: 2px;
background: #000000;
color: #000000;
position: relative;
}
/* #list>li:before {
/* counter-increment: num 2; */
/* counter-increment: num 1; */
/* content: counter(num); */
/* position: absolute;
top: 5px;
left: -4px;
} */
/*************************倒计时**************************************/
.time22 {
position: absolute;
left: 40%;
top: 30%;
display: flex;
justify-content: center;
align-items: center;
}
#time {
display: flex;
gap: 10px;
.circle {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
&::before {
content: '';
position: absolute;
border-radius: 50%;
inset: 0;
border: 10px solid #000000;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
border: 0px solid black;
}
&::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #05a388;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
& svg {
width: 150px;
height: 150px;
position: relative;
transform: rotate(270deg);
& circle {
width: 100%;
height: 100%;
fill: transparent;
stroke-width: 8;
stroke: var(--clr);
stroke-linecap: round;
transform: translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
}
}
& div {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
text-align: center;
font-weight: 500;
text-shadow: 1px 1px 1px #0c0909;
z-index: 5;
color: var(--clr);
font-size: 40px;
line-height: 1.2;
box-shadow: 1px 1px 10px rgb(82, 230, 56),
2px 2px 20px rgb(192, 230, 56),
4px 4px 40px rgb(230, 210, 56),
6px 6px 80px rgb(230, 178, 56),
8px 8px 160px rgb(230, 82, 56);
}
}
.newYear {
position: absolute;
font-size: 90px;
color: #fff;
text-shadow: 1px 1px 1px #0c0909;
left: 80px;
top: -120px;
text-shadow: 0px 1px 0px #999,
0px 2px 0px #888,
0px 3px 0px #777,
0px 4px 0px #666,
0px 5px 0px #555,
0px 6px 0px #444,
0px 7px 0px #333,
0px 8px 7px #001135;
}
</style>
<body>
<a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a>
<!-- ------------------------时钟----------------------------- -->
<div class="times">
<div id="year">
nan
</div>
<div class="main">
<span id="month"></span><span class="wai">月</span>
<span id="day"></span><span class="wai">日</span>
<span id="hour"></span><span class="wan">:</span>
<span id="min"></span><span class="wan">:</span>
<span id="sec"></span>
</div>
<div class="time22">
<div id="time">
<div class="circle" style="--clr:#1bffd9;">
<svg>
<circle cx="70" cy="70" r="70" id="dd"></circle>
</svg>
<div id="days">00<br>天</div>
</div>
<div class="circle" style="--clr:#15fd00;">
<svg>
<circle cx="70" cy="70" r="70" id="hh"></circle>
</svg>
<div id="hours">00<br>时</div>
</div>
<div class="circle" style="--clr:#f8ff2a;">
<svg>
<circle cx="70" cy="70" r="70" id="mm"></circle>
</svg>
<div id="minutes">00<br>分</div>
</div>
<div class="circle" style="--clr:#ff0303;">
<svg>
<circle cx="70" cy="70" r="70" id="ss"></circle>
</svg>
<div id="seconds">00<br>秒</div>
</div>
</div>
<h2 class="newYear">五一倒计时</h2>
</div>
</div>
<!-- 刻度线： -->
<div class="rile">
<ul class="list">
<li>60</li>
<li>59</li>
<li>58</li>
<li>57</li>
<li>56</li>
<li>55</li>
<li>54</li>
<li>53</li>
<li>52</li>
<li>51</li>
<li>50</li>
<li>49</li>
<li>48</li>
<li>47</li>
<li>46</li>
<li>45</li>
<li>44</li>
<li>43</li>
<li>42</li>
<li>41</li>
<li>40</li>
<li>39</li>
<li>38</li>
<li>37</li>
<li>36</li>
<li>35</li>
<li>34</li>
<li>33</li>
<li>32</li>
<li>31</li>
<li>30</li>
<li>29</li>
<li>28</li>
<li>27</li>
<li>26</li>
<li>25</li>
<li>24</li>
<li>23</li>
<li>22</li>
<li>21</li>
<li>20</li>
<li>19</li>
<li>18</li>
<li>17</li>
<li>16</li>
<li>15</li>
<li>14</li>
<li>13</li>
<li>12</li>
<li>11</li>
<li>10</li>
<li>09</li>
<li>08</li>
<li>07</li>
<li>06</li>
<li>05</li>
<li>04</li>
<li>03</li>
<li>02</li>
<li>01</li>
<li></li>
</ul>
<ul class="list list1">
<li>60</li>
<li>59</li>
<li>58</li>
<li>57</li>
<li>56</li>
<li>55</li>
<li>54</li>
<li>53</li>
<li>52</li>
<li>51</li>
<li>50</li>
<li>49</li>
<li>48</li>
<li>47</li>
<li>46</li>
<li>45</li>
<li>44</li>
<li>43</li>
<li>42</li>
<li>41</li>
<li>40</li>
<li>39</li>
<li>38</li>
<li>37</li>
<li>36</li>
<li>35</li>
<li>34</li>
<li>33</li>
<li>32</li>
<li>31</li>
<li>30</li>
<li>29</li>
<li>28</li>
<li>27</li>
<li>26</li>
<li>25</li>
<li>24</li>
<li>23</li>
<li>22</li>
<li>21</li>
<li>20</li>
<li>19</li>
<li>18</li>
<li>17</li>
<li>16</li>
<li>15</li>
<li>14</li>
<li>13</li>
<li>12</li>
<li>11</li>
<li>10</li>
<li>09</li>
<li>08</li>
<li>07</li>
<li>06</li>
<li>05</li>
<li>04</li>
<li>03</li>
<li>02</li>
<li>01</li>
<li></li>
</ul>
<ul class="list list2">
<li>00</li>
<li>23</li>
<li>22</li>
<li>21</li>
<li>20</li>
<li>19</li>
<li>18</li>
<li>17</li>
<li>16</li>
<li>15</li>
<li>14</li>
<li>13</li>
<li>12</li>
<li>11</li>
<li>10</li>
<li>09</li>
<li>08</li>
<li>07</li>
<li>06</li>
<li>05</li>
<li>04</li>
<li>03</li>
<li>02</li>
<li>01</li>
<li></li>
</ul>
<ul class="list list3">
<li>30</li>
<li>29</li>
<li>28</li>
<li>27</li>
<li>26</li>
<li>25</li>
<li>24</li>
<li>23</li>
<li>22</li>
<li>21</li>
<li>20</li>
<li>19</li>
<li>18</li>
<li>17</li>
<li>16</li>
<li>15</li>
<li>14</li>
<li>13</li>
<li>12</li>
<li>11</li>
<li>10</li>
<li>09</li>
<li>08</li>
<li>07</li>
<li>06</li>
<li>05</li>
<li>04</li>
<li>03</li>
<li>02</li>
<li>01</li>
<li></li>
</ul>
<ul class="list list4">
<li></li>
<li>12</li>
<li>11</li>
<li>10</li>
<li>09</li>
<li>08</li>
<li>07</li>
<li>06</li>
<li>05</li>
<li>04</li>
<li>03</li>
<li>02</li>
<li>01</li>
</ul>
</div>
<script>
/*************************现在时间*******************************/
var monbox = document.getElementById("month")
var daybox = document.getElementById("day")
var hourbox = document.getElementById("hour")
var minbox = document.getElementById("min")
var secbox = document.getElementById("sec")
var yeardiv = document.getElementById("year")
var count = 0
function clock() {
var d = new Date()
var mon = d.getMonth()
var day = d.getDate()
var hour = d.getHours()
var min = d.getMinutes()
var sec = d.getSeconds()
var year = d.getFullYear()
var W = "星期" + "日一二三四五六".charAt(new Date().getDay());
monbox.style.setProperty('--s', String(mon / 12 * 100) + '%') //生成填充背景颜色的比例
monbox.setAttribute('datatext', ("0" + (mon + 1)).slice(-2)) //生成时间日期的具体文字，个位的数字在前面补0
var allday = new Date(year, mon + 1, 0).getDate() //计算当前月份有多少天（28，29，30，31）
daybox.style.setProperty('--s', String(day / allday * 100) + '%')
daybox.setAttribute('datatext', ("0" + (day)).slice(-2))
hourbox.style.setProperty('--s', String(hour / 24 * 100) + '%')
hourbox.setAttribute('datatext', ("0" + (hour)).slice(-2))
minbox.style.setProperty('--s', String(min / 60 * 100) + '%')
minbox.setAttribute('datatext', ("0" + (min)).slice(-2))
secbox.style.setProperty('--s', String(sec / 60 * 100) + '%')
secbox.setAttribute('datatext', ("0" + (sec)).slice(-2))
yeardiv.innerText = year + '(' + W + ')'// 计算年份数字
}
setInterval(clock, 100)
/*************************倒计时**************************************/
let days = document.getElementById('days');
let hours = document.getElementById('hours');
let minutes = document.getElementById('minutes');
let seconds = document.getElementById('seconds');
let dd = document.getElementById('dd');
let hh = document.getElementById('hh');
let mm = document.getElementById('mm');
let ss = document.getElementById('ss');
let enDate = '05/1/2024 00:00:00';
let x = setInterval(function () {
let now = new Date(enDate).getTime();
let countDown = new Date().getTime();
let distance = now - countDown;
let d = Math.floor(distance / (1000 * 60 * 60 * 24));
let h = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
let m = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60));
let s = Math.floor(distance % (1000 * 60) / 1000);
d = d < 10 ? "0" + d : d
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
days.innerHTML = d + '<br><span>天</span>';
hours.innerHTML = h + '<br><span>时</span>';
minutes.innerHTML = m + '<br><span>分</span>';
seconds.innerHTML = s + '<br><span>秒</span>';
dd.style.strokeDashoffset = 440 - (440 * d) / 365;
hh.style.strokeDashoffset = 440 - (440 * h) / 24; // 24
mm.style.strokeDashoffset = 440 - (440 * m) / 60; // 60
ss.style.strokeDashoffset = 440 - (440 * s) / 60; // 60
})
</script>
</html>