HTML+CSS+JS制作一个蓝色简约动态时钟

HTML+CSS+JS制作一个蓝色简约动态时钟——借鉴网络代码加以改进后的效果

直接跳转至代码处


1. 效果图:

HTML+CSS+JS制作一个蓝色简约动态时钟

2. 背景产生:可以参看HTML+CSS+JS制作一个漂亮的橙子动态时钟,这次使用到了jQuery,所以需要注意引入这个文件<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>


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 s = d.getSeconds();//秒
const m = d.getMinutes();//分
const h = d.getHours();//时

const sDeg = (( s / 60 ) * 360 );
const mDeg = (( m / 60 ) * 360 );
const hDeg = (( h / 12 ) * 360 );

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>

HTML+CSS+JS制作一个蓝色简约动态时钟

上一篇:vue 前端渲染 json格式化展示


下一篇:css属性选择器