HTML+CSS+JS制作一个蓝色简约动态时钟——借鉴网络代码加以改进后的效果
HTML+CSS+JS制作一个蓝色简约动态时钟——借鉴网络代码加以改进后的效果
1. 效果图：
3. 代码实现：
<!DOCTYPE html>
<html lang="ch" >
<head>
<title>蓝色简约时钟——戈小戈</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="author" content="戈小戈">
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
<!-- CSS代码开始 -->
<style type="text/css">
/* body {
background-color: #fff;
margin: 0;
} */
.wrapper {
position: relative;
}
/* author:戈小戈 */
.face {
display: flex;
justify-content: center;
align-items: center;
max-width: 20vmin;
height: 20vmin;
border-radius: 50%;
position: relative;
background:rgb(255,255,255,0.5);
border: 0.5vmin solid#00CED1;
box-shadow: inset 0px 0px 1vmin 0.1vmin #00CED1;
}
.face:after {
content: '';
display: block;
width: 2vmin;
height: 2vmin;
border-radius: 50%;
background-image: url(https://www.cnblogs.com/images/logo.svg?v=R9M0WmLAIPVydmdzE2keuvnjl-bPR7_35oHqtiBzGsM);
position: absolute;
background-size:cover;
z-index:9;
-webkit-transform: rotate(-360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
.quarter {
height: 95%;
width: 95%;
position: absolute;
}
.quarter div {
height: 2.4%;
width: 2.4%;
border-radius: 50%;
background-color:#00CED1;
position: absolute;
}
.quarter div:nth-child(1) {right:25%;top:6.7%}/*1点*/
.quarter div:nth-child(2) {right:6.7%;top:25%}/*2点*/
.quarter div:nth-child(3) {right:0%;top:47.5%}/*3点*/
.quarter div:nth-child(4) {right:6.7%;bottom:25%}/*4点*/
.quarter div:nth-child(5) {right:25%;bottom:6.7%}/*5点*/
.quarter div:nth-child(6) {left:47.5%;bottom:0%}/*6点*/
.quarter div:nth-child(7) {left:25%;bottom:6.7%}/*7点*/
.quarter div:nth-child(8) {left:6.7%;bottom:25%}/*8点*/
.quarter div:nth-child(9) {left:0%;top:47.5%}/*0点*/
.quarter div:nth-child(10) {left:6.7%;top:25%}/*10点*/
.quarter div:nth-child(11) {left:25%;top:6.7%}/*11点*/
.quarter div:nth-child(12) {left:47.5%; top:0%}/*12点*/
.hands div {
position: absolute;
bottom: 50%;
border-radius: 1vmin;
transform-origin: 50% 100%;
transform: rotate(0);
}
.hands div.h {
height: 27%;
width: 2.4%;
left: 48.8%;
background-color: #025c5c;
}
.hands div.m {
height: 40%;
width: 2.4%;
left: 48.8%;
background-color: #02a7aa;
}
.hands div.s {
height: 50%;
width: 1%;
left: 49.5%;
bottom: 40%;
transform-origin: 50% 80%;
background-color: #00CED1;
}
.date {
position: absolute;
top: 20%;
left: 0;
right: 0;
color: #00CED1;
text-align: center;
font-size: 1.5vmin;
}
.date span{
margin: 0px 2px;
color: #00CED1;
font-family: DINBold;
font-weight: lighter;
}
.week {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
color: #00CED1;
text-align: center;
padding: 1%;
font-size: 1.5vmin;
font-family: impact;
z-index: 1;
}
.year {
position: absolute;
top: 25%;
left: 0;
right: 0;
color: #00CED1;
text-align: center;
font-size: 6vmin;
font-family: impact;
opacity: 0.2;
z-index: 1;
}
</style>
<!-- CSS代码结束 -->
</head>
<body>
<div class="wrapper" style="margin:1.5vmin 0 auto;">
<!-- author:戈小戈 -->
<div class="face">
<div class="quarter">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="hands"style="z-index:2;">
<div class="m"></div>
<div class="h"></div>
<div class="s"></div>
</div>
<div class="spot"></div>
</div>
</div>
<!--结束-->
<script>
// author:戈小戈
var date = "<div class='date'></div>";
$(".spot").before(date);
//显示星期
var week = "<div class='week'></div>";
$(".date").before(week);
//显示年度
var year = "<div class='year'></div>";
$(".date").before(year);
const sHand = document.querySelector('.s');
const mHand = document.querySelector('.m');
const hHand = document.querySelector('.h');
function setTime() {
const d = new Date();
var Y = d.getFullYear(); //年
var M = d.getMonth() + 1; //月
var D = d.getDate(); //日
var U = d.getUTCDay(); //周
const ms = d.getMilliseconds();//毫秒
const s = d.getSeconds();//秒
const m = d.getMinutes();//分
const h = d.getHours();//时
const sDeg = (( s / 60 ) * 360 ) + (( ms / 1000 ) * 6 );
const mDeg = (( m / 60 ) * 360 ) + (( s / 60 ) * 6 );
const hDeg = (( h / 12 ) * 360 ) + (( m / 60 ) * 30 );
sHand.style.transform = `rotate( ${sDeg}deg )`;
mHand.style.transform = `rotate( ${mDeg}deg )`;
hHand.style.transform = `rotate( ${hDeg}deg )`;
//星期赋值
switch (U){
case 0:U="星期日";
break;
case 1:U="星期一";
break;
case 2:U="星期二";
break;
case 3:U="星期三";
break;
case 4:U="星期四";
break;
case 5:U="星期五";
break;
case 6:U="星期六";
break;
};
//星期赋值
var week = U;
$(".week").html(week);
//年份赋值
var year = Y;
$(".year").html(year);
//日期赋值
var date = "<span>" + M + "</span>" + "月" + "<span>" + D + "</span>" + "日";
$(".date").html(date);
}
setInterval( setTime, 10 );
</script>
</body>
</html>
