网页时钟

2019-08-25 20:39:30 阅读：606 来源： 互联网

标签：网页 margin top radius background 0px border 时钟

酷酷的网页时钟

在这里插入图片描述

clock.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="clock.css"/>
	</head>
	<body>
		<div class="container">
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="center"></div>
		</div>
		<sapn style="margin-left: 100px; font-size: 12px; font-family: 仿宋;">现在时刻是<span class="time"></span></sapn>
		<script src="clock.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

clock.css

body{
	background-color: #95a5a6;
	padding: 0;
	margin: 0;
}
.container{
	position: relative;
	top: 100px;
	margin: auto;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	box-sizing: border-box;
	border:10px solid #60a3bc;
	box-shadow:0px 0px 10px red,inset 0px 0px 10px red;
	background: url(demo4.jpg) top left/200px 200px no-repeat;
}

.moment{
	position: absolute;
	margin:0 auto;
	top: 0;
	left:89px;
	width: 2px;
	height: 10px;
	opacity: 0.9;
	border-radius: 5px;
	background-color: #22a6b3;
	transform-origin:1px 90px;
}
.hour{
	position: absolute;
	margin:0 auto;
	top: 0;
	left:86px;
	width: 8px;
	height: 50px;
	opacity: 0.9;
	margin-top: 40px;
	border-radius: 5px;
	background-color: #e55039;
	transform-origin:4px 50px;
}
.minute{
	position: absolute;
	top: 0;
	left :87px;
	margin: 0 auto;
	width: 6px;
	height: 65px;
	opacity: 0.6;
	margin-top: 25px;
	border-radius: 5px;
	transform-origin: 3px 65px;
	background-color:#B53471;
}

.second{
	position: absolute;
	top: 0;
	left:88px;
	width: 4px;
	height: 90px;
	opacity: 0.4;
	border-radius: 5px;
	transform-origin: 2px 90px;
	background-color:#12CBC4;
}
.center{
	position: absolute;
	left: 82px;
	top: 82px;
	width: 16px;
	height: 16px;
	border-radius: 50px;
	background-color: #2c2c54;
	z-index: 9;
	box-shadow: 0px 0px 10px #1B1464;
}

clock.js

var data,hour,minute,second;
var deghour,degminute,degsecond;
var domhour,domminute,domsecond;
var domSpan = document.querySelector("span.time");
var domContainer = document.querySelector(".container");

function createMoment(){
	for(var i = 0; i<12 ;i++){
		var item = document.createElement("div");
		item.setAttribute("class","moment");
		var degIn = i * 30;
		item.style.transform = `rotate(${degIn}deg)`;
		domContainer.appendChild(item);
    }
}
function showSpan(){
	setInterval(function(){
		data = new Date();
		hour = data.getHours();//获取小时
		minute = data.getMinutes(); //获取分钟
		second = data.getSeconds(); //获取秒
		deghour = hour*30;
		degminute = minute*6;
		degsecond = second*6;
		domhour = document.querySelector(".hour");
		domminute = document.querySelector(".minute");
		domsecond = document.querySelector(".second");
		domhour.style.transform = `rotate(${deghour}deg)`;
		domminute.style.transform = `rotate(${degminute}deg)`;
		domsecond.style.transform = `rotate(${degsecond}deg)`;
		domSpan.textContent = hour+":"+minute+":"+second; 
	},1000);
}
createMoment();
showSpan();

标签：网页,margin,top,radius,background,0px,border,时钟
来源： https://blog.csdn.net/qq_43079376/article/details/100067128

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

网页时钟

酷酷的网页时钟