当前位置:首页 > 技术博客 > JavaScript > js写时钟实现钟摆效果,js制作动态时钟特效

js写时钟实现钟摆效果,js制作动态时钟特效

admin1年前 (2022-05-02)JavaScript624

这是一款模拟摆钟造型的简洁js时钟效果,画面中的摆钟上方打了一束光,形象逼真。

<!doctype html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>简洁的js时钟效果</title>    
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>   
<style>    
body {    
	background-color: #dfdad4;    
	height: 100vh;    
	display: flex;    
	align-items: center;    
	justify-content: center;    
}    
.clock {    
	position: relative;    
	border-radius: 100%;    
	box-shadow: 2px 10px 10px 10px rgba(0, 0, 0, 0.3),    
		inset 2px 20px 10px 10px rgba(0, 0, 0, 0.3);    
}    
.wrap {    
	width: 250px;    
	height: 250px;    
	border-radius: 100%;    
}    
.ringbit {    
	position: absolute;    
	width: 150px;    
	height: 350px;    
	border: 20px solid transparent;    
	border-radius: 90px;    
	margin: auto;    
	left: 0;    
	bottom: 0;    
	right: 0;    
	top: 0;    
	border-bottom: 20px solid white;    
}    
.ringbit:before {    
	content: "";    
	position: absolute;    
	width: 150px;    
	height: 350px;    
	border: 20px solid transparent;    
	border-radius: 90px;    
	margin: auto;    
	left: -15%;    
	bottom: 0;    
	right: 0;    
	top: 5%;    
	border-bottom: 20px solid rgba(0, 0, 0, 0.2);    
	filter: blur(5px);    
	z-index: -1;    
}    
.ring {    
	position: absolute;    
	width: 100%;    
	height: 100%;    
	border: 20px solid black;    
	border-radius: 100%;    
	box-sizing: border-box;    
	border-left: 20px solid white;    
	border-right: 20px solid white;    
}    
.light {    
	position: absolute;    
	width: 50px;    
	height: 30px;    
	top: 0;    
	border-radius: 100%;    
	background-color: white;    
	box-shadow: 0 0 10px 5px white;    
}    
.lightray {    
	position: absolute;    
	width: 200px;    
	height: 200px;    
	top: 5%;    
	border-radius: 50px;    
	background-image: linear-gradient(45deg, transparent, transparent, white);    
	transform: rotate(-45deg);    
}    
.panel {    
	position: absolute;    
	height: 180px;    
	width: 180px;    
	background-color: black;    
	margin: auto;    
	left: 0;    
	right: 0;    
	top: 0;    
	bottom: 0;    
	border-radius: 100%;    
}    
.panel:after {    
	content: "RAMESH";    
	position: absolute;    
	top: 48px;    
	left: 0;    
	right: 0;    
	bottom: 0;    
	color: silver;    
	font-size: 11px;    
	text-align: center;    
}    
.string1,    
.string2,    
.string3 {    
	position: absolute;    
	width: 3px;    
	height: 180px;    
	border-top: 30px solid black;    
	border-bottom: 30px solid black;    
	left: 0;    
	right: 0;    
	top: 0;    
	bottom: 0;    
	margin: auto;    
}    
.string1 {    
	transform: rotate(45deg);    
}    
.string2 {    
	transform: rotate(135deg);    
}    
.string3 {    
	transform: rotate(0deg);    
	border-bottom: 200px solid black;    
	border-top: 0;    
}    
.mynum {    
	font-family: "verdana";    
	font-size: 1.2em;    
	color: white;    
}    
.mynum span {    
	width: 180px;    
	height: 180px;    
	position: absolute;    
	margin: auto;    
}    
.mynum span:nth-child(1) {    
	left: 160px;    
	right: 0;    
	top: 20px;    
	bottom: 0;    
}    
.mynum span:nth-child(11) {    
	left: 75px;    
	right: 0;    
	top: 20px;    
	bottom: 0;    
}    
.mynum span:nth-child(12) {    
	left: 113px;    
	right: 0;    
	top: 0;    
	bottom: 0;    
}    
.mynum span:nth-child(2) {    
	left: 190px;    
	right: 0;    
	top: 80px;    
	bottom: 0;    
}    
.mynum span:nth-child(10) {    
	left: 25px;    
	right: 0;    
	top: 80px;    
	bottom: 0;    
}    
.mynum span:nth-child(3) {    
	left: 200px;    
	right: 0;    
	top: 155px;    
	bottom: 0;    
}    
.mynum span:nth-child(9) {    
	left: 10px;    
	right: 0;    
	top: 155px;    
	bottom: 0;    
}    
.mynum span:nth-child(4) {    
	left: 188px;    
	right: 0;    
	top: 235px;    
	bottom: 0;    
}    
.mynum span:nth-child(8) {    
	left: 30px;    
	right: 0;    
	top: 235px;    
	bottom: 0;    
}    
.mynum span:nth-child(5) {    
	left: 160px;    
	right: 0;    
	top: 270px;    
	bottom: 0;    
}    
.mynum span:nth-child(7) {    
	left: 80px;    
	right: 0;    
	top: 270px;    
	bottom: 0;    
}    
.mynum span:nth-child(6) {    
	left: 120px;    
	right: 0;    
	top: 280px;    
	bottom: 0;    
}    
.hour,    
.minute,    
.second {    
	position: absolute;    
	background-color: white;    
	margin: auto;    
	left: 0;    
	right: 0;    
	transform-origin: bottom center;    
}    
.hour {    
	height: 50px;    
	width: 5px;    
	top: 75px;    
	border-radius: 10px;    
}    
.minute {    
	height: 65px;    
	width: 3.5px;    
	top: 60px;    
	border-radius: 10px;    
}    
.second {    
	height: 70px;    
	width: 2px;    
	top: 55px;    
	border-radius: 3px;    
}    
.pin {    
	position: absolute;    
	width: 5px;    
	height: 5px;    
	left: 0;    
	right: 0;    
	top: 0;    
	bottom: 0;    
	margin: auto;    
	background-color: orange;    
	border: 2px solid white;    
	border-radius: 100%;    
}    
@keyframes myanim1 {    
	to {    
		transform: rotate(360deg);    
	}    
}    
</style>    
</head>    
<body>    
<div class="light"></div>    
<div class="lightray"></div>    
<div class="clock">    
	<div class="wrap">    
		<div class="string1"></div>    
		<div class="string2"></div>    
		<div class="string3"></div>    
		<div class="ringbit"></div>    
		<div class="ring"></div>    
		<div class="panel"></div>    
		<div class="hour"></div>    
		<div class="minute"></div>    
		<div class="second"></div>    
		<div class="pin"></div>    
		<div class="mynum">    
			<span>1</span>    
			<span>2</span>    
			<span>3</span>    
			<span>4</span>    
			<span>5</span>    
			<span>6</span>    
			<span>7</span>    
			<span>8</span>    
			<span>9</span>    
			<span>10</span>    
			<span>11</span>    
			<span>12</span>    
		</div>    
	</div>    
</div>    
<script>    
var inc = 1000;    
myclock();    
function myclock() {    
	const mydate = new Date();    
	const hours = ((mydate.getHours() + 11) % 12) + 1;    
	const minutes = mydate.getMinutes();    
	const seconds = mydate.getSeconds();    
	const hdegree = hours * 30;    
	const mdegree = minutes * 6;    
	const sdegree = seconds * 6;    
	document.querySelector(".hour").style.transform = `rotate(${hdegree}deg)`;    
	document.querySelector(".minute").style.transform = `rotate(${mdegree}deg)`;    
	document.querySelector(".second").style.transform = `rotate(${sdegree}deg)`;    
}    
setInterval(myclock, inc);    
</script>    
</body>    
</html>


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/256.html

相关文章

JavaScript 中定义数组和操作数组

JavaScript 中定义数组和操作数组

一.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),...

JavaScript实现网页中繁体简体切换,纯Es5写的高兼容性

JavaScript实现网页中繁体简体切换,纯Es5写的高兼容性

HTML代码<span onclick="zh_tran('t');">繁体中文</span&g...

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

在网上搜到很多,99%不能用,自己动手将整理记录一下吧,以便后续再使用!<head>     <ti...

整理:JavaScript字符串的截取以及数组的截取

整理:JavaScript字符串的截取以及数组的截取

在编写前端时,截取字符串或者是截取数组的部分元素都是频繁出现的场景,所以在这整理一下:一、截取字符串JS提供三个截取字符串的方法,分别是:slice(),sub...

关于bootstrap.min.js.map报错404的问题

关于bootstrap.min.js.map报错404的问题

相信很多用过BootStrap框架的伙伴都遇到过bootstrap.min.js.map 404的错误,明明自己并没有去调用这个文件为什么会报这个错误呢?小沫就...

大气磅礴的滑块网页背景

大气磅礴的滑块网页背景

<html>     <head>     <...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌