网页时钟

最新推荐文章于 2024-06-26 19:39:06 发布

sofency

最新推荐文章于 2024-06-26 19:39:06 发布

阅读量608

点赞数

分类专栏： HTML css js 文章标签：时钟 html css js

本文链接：https://blog.csdn.net/qq_43079376/article/details/100067128

版权

js 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

酷酷的网页时钟

在这里插入图片描述

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();

sofency

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页时钟

clock.html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="clock.css"/> </head&...
复制链接

扫一扫

专栏目录