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

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

3年前 (2022-05-02)JavaScript934

这是一款模拟摆钟造型的简洁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

标签: JavaScriptjQuery
返回列表

上一篇：JavaScript 面试题 : alert(1 && 2）

下一篇：Javascript 的深色和浅色模式

相关文章

js数字拼接

js数字拼接

有时候我们需要把两组数字拼接在一起，那么要怎么办呢？废话不多说直接上代码：var str1 = 110, str2&nb...

JavaScript 中定义数组和操作数组

JavaScript 中定义数组和操作数组

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

百度地图JavaScript简单标点连线

百度地图JavaScript简单标点连线

背景最近在研究轨迹数据的挖掘，第一步就是把轨迹数据在地图上可视化出来，然后再进行后续的算法研究。从一开始懵懂知道百度地图有免费的 API 可以调用，到后面知道还...

原生js自定义雷达图

原生js自定义雷达图

完整代码：<head>     <style> body{   &nb...

javascript 滚动插入元素动画特效

javascript 滚动插入元素动画特效

监听窗体滚动条，新的元素会以 左移、右移、淡出、淡入 等各种方式插入到文档流中<head>     <...

响应式人物介绍列表ui切换特效

响应式人物介绍列表ui切换特效

一款js css3制作响应式的人物介绍图文列表，带左右按钮控制列表滑动切换效果。可用于企业团队人物介绍ui布局。下载链接: https://pan.baidu....

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

ICP
提供技术支持 赞助云储存