【项目】仿IOS时钟

最新推荐文章于 2022-08-24 09:19:59 发布

希冀miracle

最新推荐文章于 2022-08-24 09:19:59 发布

阅读量850

点赞数

分类专栏： web前端相关

本文链接：https://blog.csdn.net/weixin_39843945/article/details/89929273

版权

web前端相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.图片展示
在这里插入图片描述
（表针是转的，哭唧唧）
2.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿手机时钟</title>
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
	<div class="clock">
		<ul class="dial"> 
			<!-- <li class="num"><span>1</span></li>
			<li class="num"><span>2</span></li>
			<li class="num">3</li>
			<li class="num">4</li>
			<li class="num">5</li>
			<li class="num">6</li>
			<li class="num">7</li>
			<li class="num">8</li>
			<li class="num">9</li>
			<li class="num">10</li>
			<li class="num">11</li>
			<li class="num">12</li>
			 -->
		</ul>
		<div class="point"></div>
		<div class="hour"></div>
		<div class="min"></div>
		<div class="sec"></div>
	</div>
	<script type="text/javascript" src="./JS/index.js"></script>
	</body>
</html>

3.CSS

@CHARSET "UTF-8";
body,ul{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
.clock{
	width: 230px;
	height: 230px;
	background: black;
	margin: 100px auto;
	border-radius: 40px;
	position:relative;
	overflow:hidden;/* 写在dial的父级解决margin塌陷的问题 */
}
.dial{
	
	width: 200px;
	height: 200px;
	/* 
	实现水平垂直居中，父级元素要写position:relative; */
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px;
	border-radius: 50%;
	background: white;
	/* margin: 15px auto; */
}
li{
	position: absolute;	
	top:0;
	left: 50%;
	width:30px;
	margin-left: -15px;
	text-align: center;
	transform-origin:15px 100px;
	font-weight: 600;
}
/* 由于span不是块元素 */
li span{
	display: inline-block;
}
.point{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	left:50%;
	top:50%;
	margin-left: -5px;
	margin-top: -5px;
	background-color: black;
}

.hour{
	width: 4px;
	height: 70px;
	background-color:black;
	position:absolute;
	left:50%;
	top:45px;
	margin-left: -2px;
	transform-origin:center bottom;
	transform:rotate(30deg);
}
.min{
	width: 4px;
	height: 90px;
	background-color:black;
	position: absolute;
	left: 50%;
	top:25px;
	margin-left: -2px;
	transform-origin:center bottom;
	transform:rotate(60deg);
}
.sec{
	width: 2px;
	height: 100px;
	background-color:red;
	position: absolute;
	left: 50%;
	top:25px;
	margin-left: -1px;
	transform-origin:center 90px;
	transform:rotate(90deg);
}

/* 
1.水平居中两种方式
margin position
2.
transform:rotate
3.对于自身而言
transform-origin
4.
inth-child:nth-of-type区别
 */
/* li:NTH-CHILD(1) span{
	transform:rotate(-30deg);
}
li:NTH-CHILD(1) {
	transform:rotate(30deg);	
}
li:NTH-CHILD(2) span{
	transform:rotate(-60deg);
}
li:NTH-CHILD(2) {
	transform:rotate(60deg);	
}
li:NTH-CHILD(3) {
	transform:rotate(90deg);	
}
li:NTH-CHILD(4) {
	transform:rotate(120deg);	
}
li:NTH-CHILD(5) {
	transform:rotate(150deg);	
}
li:NTH-CHILD(6) {
	transform:rotate(180deg);	
}
li:NTH-CHILD(7) {
	transform:rotate(210deg);	
}
li:NTH-CHILD(8) {
	transform:rotate(240deg);	
}
li:NTH-CHILD(9) {
	transform:rotate(270deg);	
}
li:NTH-CHILD(10) {
	transform:rotate(300deg);	
}
li:NTH-CHILD(11) {
	transform:rotate(330deg);	
}
li:NTH-CHILD(12) {
	transform:rotate(360deg);	
}
 */

4.JS

var total=12;
var str="";
var oDail=document.getElementsByClassName("dial")[0];
var oHour=document.getElementsByClassName("hour")[0];
var oMin=document.getElementsByClassName("min")[0];
var oSec=document.getElementsByClassName("sec")[0];


function init(){
	for(var i=1;i<=total;i++){

		str+='<li class="num"style="transform:rotate('+i*30+'deg)">\
			<span style="transform:rotate('+(-i)*30+'deg)">' + i + '</span>\
			</li>';
		
	}
	oDail.innerHTML=str;
	time();
}
init();
function time(){
	var date=new Date();
	
	var sec=date.getSeconds();
	var msec=date.getMilliseconds();
	var fullSecond=sec+msec/1000;
	oSec.style.transform='rotate('+fullSecond*6+'deg)';
	
	var min=date.getMinutes();
	var fillMin=min+fullSecond/60;
	oMin.style.transform='rotate('+fillMin*6+'deg)';
	
	var hour=date.getHours();
	var fillHour=hour+fillMin/60;
	oHour.style.transform='rotate('+fillHour*30+'deg)';
	
	setTimeout(time,1000/60);
}
//1.new Date()
//2.字符串拼接