css3模拟时钟

最新推荐文章于 2023-11-19 14:38:29 发布
最新推荐文章于 2023-11-19 14:38:29 发布
阅读量1.7k 收藏
点赞数
分类专栏： css3 javascript 文章标签： css class function generator timer border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jacky_Jxchen/article/details/7964237
版权


css3模拟时钟，标题包含css3看的时候就不要用那些浏览器了，大家懂的……

直接上code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> css3模拟时钟 </title>
	<meta name="generator" content="editplus" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
	*{ margin:0; padding:0;}
	/*设置时钟的外框*/
	.clock{ position:absolute; top:50%; left:50%; width:500px; height:500px; margin-left:-250px; margin-top:-250px; padding:6px;  border:1px solid #ccc;
		-webkit-border-radius:253px;
		-moz-border-radius:253px;
		-o-border-radius:253px;
		-ms-border-radius:253px;
		border-radius:253px;
	}
	/*设置时钟的分格针，分针格是通过js创建*/
	.minutes{ position:absolute; top:50%; left:50%; width:100%; height:100%; margin-left:-50%; margin-top:-50%;
		-webkit-border-radius:250px;
		-moz-border-radius:250px;
		-o-border-radius:250px;
		-ms-border-radius:250px;
		border-radius:250px;
	}
	/*设置时钟的时针格，时针格是通过js创建*/
	.hours{ position:absolute; top:50%; left:50%; width:494px; height:494px; margin-left:-247px; margin-top:-247px; background-color:#FFF;
		-webkit-border-radius:247px;
		-moz-border-radius:247px;
		-o-border-radius:247px;
		-ms-border-radius:247px;
		border-radius:247px;
	}
	/*设置时钟的表针外框样式*/
	.hms{ position:absolute; top:50%; left:50%; width:480px; height:480px; margin-left:-240px; margin-top:-240px; background-color:#FFF;
		-webkit-border-radius:240px;
		-moz-border-radius:240px;
		-o-border-radius:240px;
		-ms-border-radius:240px;
		border-radius:240px;
	}
	/*设置时钟的时针样式*/
	.h{ position:absolute; top:50%; left:50%; margin-left:-3px; margin-top:-155px; width:6px; height:165px; background-color:#333; z-index:10;
		-webkit-transform-origin: center 155px;
		-moz-transform-origin: center 155px;
		-o-transform-origin: center 155px;
		-ms-transform-origin: center 155px;
		transform-origin: center 155px;
	}
	/*设置时钟的分针样式*/
	.m{ position:absolute; top:50%; left:50%; margin-left:-2px; margin-top:-195px; width:4px; height:205px; background-color:#666; z-index:9;
		-webkit-transform-origin: center 195px;
		-moz-transform-origin: center 195px;
		-o-transform-origin: center 195px;
		-ms-transform-origin: center 195px;
		transform-origin: center 195px;
	}
	/*设置时钟的秒针样式*/
	.s{ position:absolute; top:50%; left:50%; margin-left:-1px; margin-top:-235px; width:2px; height:245px; background-color:#999; z-index:8;
		-webkit-transform-origin: center 235px;
		-moz-transform-origin: center 235px;
		-o-transform-origin: center 235px;
		-ms-transform-origin: center 235px;
		transform-origin: center 235px;
	}
	</style>
</head>
<body>
<div id="clock" class="clock">
	<div id="minutes" class="minutes"></div>
	<div id="hours" class="hours"></div>
	<div id="hms" class="hms">
		<div id="h" class="h"></div>
		<div id="m" class="m"></div>
		<div id="s" class="s"></div>
	</div>
</div>
<script type="text/javascript">
	window.onload = function()
	{
		var oMinutes = $('minutes');
		var oHours = $('hours');
		var oH = $('h');
		var oM = $('m');
		var oS = $('s');
		var timer = null;
		var i = 0;
	
		//console.time('hello')

		//创建分针格，每格的角度为(360/60)deg
		for(i = 0; i < 30; i++)
		{
			var aMinutes = document.createElement('div');
			
			aMinutes.style.cssText = 'position:absolute; top:50%; left:50%; width:2px; background-color:#ccc; height:100%; margin-top:-50%; margin-left:-1px; -webkit-transform: rotate('+((i+1) * 6)+'deg); -moz-transform: rotate('+((i+1) * 6)+'deg); -o-transform: rotate('+((i+1) * 6)+'deg); -ms-transform: rotate('+((i+1) * 6)+'deg); transform: rotate('+((i+1) * 6)+'deg);';

			if((i+1)%5==0)
			{
				aMinutes.style.width = '4px';
				aMinutes.style.marginLeft = '-2px';
			}
			oMinutes.appendChild(aMinutes);
		}

		//创建时针格，每格的角度为(360/12)deg
		for(i = 0; i < 12; i++)
		{
			var aHours = document.createElement('div');
			aHours.style.cssText = 'position:absolute; top:50%; left:50%; width:4px; background-color:#ccc; height:100%; margin-top:-50%; margin-left:-2px; -webkit-transform: rotate('+((i+1) * 30)+'deg); -moz-transform: rotate('+((i+1) * 30)+'deg); -o-transform: rotate('+((i+1) * 30)+'deg); -ms-transform: rotate('+((i+1) * 30)+'deg); transform: rotate('+((i+1) * 30)+'deg);';
			oHours.appendChild(aHours);

		}

			timer = setInterval(getTimes,1000)//设置一个定时器，每秒钟获取一次系统时间，然后设置，时分秒针的位置

			function getTimes()
			{

				var oDate = new Date();

				oH.style.cssText = '-webkit-transform: rotate('+(oDate.getHours()%12)*30+'deg); -moz-transform: rotate('+(oDate.getHours()%12)*30+'deg); -o-transform: rotate('+(oDate.getHours()%12)*30+'deg); -ms-transform: rotate('+(oDate.getHours()%12)*30+'deg); transform: rotate('+(oDate.getHours()%12)*30+'deg);'

				oM.style.cssText = '-webkit-transform: rotate('+(oDate.getMinutes()%60)*6+'deg); -moz-transform: rotate('+(oDate.getMinutes()%60)*6+'deg); -o-transform: rotate('+(oDate.getMinutes()%60)*6+'deg); -ms-transform: rotate('+(oDate.getMinutes()%60)*6+'deg); transform: rotate('+(oDate.getMinutes()%60)*6+'deg);'

				oS.style.cssText = '-webkit-transform: rotate('+(oDate.getSeconds()%60)*6+'deg); -moz-transform: rotate('+(oDate.getSeconds()%60)*6+'deg); -o-transform: rotate('+(oDate.getSeconds()%60)*6+'deg); -ms-transform: rotate('+(oDate.getSeconds()%60)*6+'deg); transform: rotate('+(oDate.getSeconds()%60)*6+'deg);'

			}

			getTimes()//给表针一个初始值，防止刚打开，或刷新页面时，时，分，秒针归零

			//console.timeEnd('hello')

	}

	function $(id)
	{
		return typeof id === 'string' ? document.getElementById(id) : id;
	}
</script>

</body>
</html>





Jxchen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
具有纯CSS3的模拟时钟（无JavaScript）
cuken7684698822的博客
08-02 427
CSS3 clock. Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have th...
前端使用css3实现模拟时钟
m0_46577631的博客
11-21 187
使用css3实现模拟时钟
【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
飛天网事
09-23 3112
使用CSS3纯代码来实现模拟时钟，及指针动画功能。 在这里主要使用到css3一些基本元素： border-radius：圆角边框，画圆形；表盘 Transform：变换，旋转，扭曲；刻度盘，指针形状 Animation：时分秒指针转动。 :before/:after :伪元素 基本思路： 3
HTML5、CSS3 制作模拟时钟
ZPan的博客
04-18 2075
HTML5、CSS3 、jQuery制作模拟时钟
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
热门推荐
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
JavaScript练习——模拟时钟
最新发布
m0_65290003的博客
11-19 282
1、将以下四张图片通过定位 ( 子绝父相 ) 的方式定位到生活中时钟的样子( clock是表盘、hour是时针、minute是分针、second是秒针 )，表盘使用相对定位( 即: position: relative );，三个针使用绝对定位 ( 即: position: absolute );2、声明一个间歇函数让时钟按照 ( 每秒 / 度 ) 自动转动，再声明三个变量来定义 transform: rotate();，设置三个钟针旋转的度数。
jquery+css3模拟时钟走动效果.zip
09-25
"jquery+css3模拟时钟走动效果.zip"这个压缩包提供了一种实现方式，它利用jQuery库和CSS3技术来创建一个实时更新的时钟效果，为网站增添了一丝生动感。以下将详细解析这个项目的组成部分及实现原理。 首先，jQuery...
JS+CSS3圆形时钟走动特效网页设计，html+css3模拟时钟走动
02-15
JS+CSS3圆形时钟走动特效网页设计，html+css3模拟时钟走动，纯静态网页实现； 主要是用了transform属性，定时器setInterval动态改变旋转角度来达到时钟动态效果，源码分离了css、js和html，总共分为三个文件； 主要...
jQuery+CSS3模拟时钟特效.rar
10-01
【jQuery+CSS3模拟时钟特效】是一种在网页上实现动态、实时显示时间的视觉效果。这个特效结合了JavaScript库jQuery的灵活性与CSS3的新特性，以创建出既美观又功能强大的时钟组件。以下是对这个特效涉及的知识点的...
CSS3在线模拟时钟日期效果
06-12
【CSS3在线模拟时钟日期效果】是一种利用CSS3的强大功能来创建动态、实时的时钟界面的技术。这种效果能够使网页上的时钟与用户的本地时间同步，为用户提供直观的时间显示，增强了用户体验。下面我们将详细探讨这个...
jquery+css3模拟时钟走动效果
06-12
通过结合HTML5、CSS3和jQuery，我们可以创建一个实时更新、动态美观的模拟时钟。这个项目不仅展示了Web开发的最新技术，还为开发者提供了实践这些技术的机会。无论你是初学者还是经验丰富的开发者，这个懒人之家推荐...
js随机打乱数组
Jxchen
12-11 6470
一、比较乱的排序方法 function fnLuanXu(num) { var aLuanXu=[]; for (var i = 0; i < num; i++) { aLuanXu[i] = i; } for (var i = 0; i < num; i++) { var iRand = parseInt(num * Math.random()); var
根据select选中的值来做的切换
Jxchen
08-25 5606
根据选择下拉菜单的中的值来切换显示内容 HTML： 选择内容1 选择内容2 选择内容3 选择内容4 要显示的内容1 要显示的内容2 要显示的内容3 要显示的内容4 JS： (function($)
删除数组中下标为n的元素
Jxchen
02-20 5577
无标题文档 function removeArrayOfN(arr,n) { if(n > arr.length-1 || n < 0){ alert('没有找到下标为'+n+'的元素！'); return;}//如果n大于或小于指定数组的长度则返回 var arr1 = []; for(var i = 0; i < arr.length; i++) { if(i =
js生成web安全色
Jxchen
11-28 5399
256色里有40种颜色在Macintosh和Windows里显示的效果不一样，所以能安全使用的只有216色。 web安全色 div{ color:#f60; font:12px/1.5 Georgia;} window.onload = function() { var aColor = ['00','33','66','99','CC
js彩票大乐透
Jxchen
02-20 2611
无标题文档 //随机函数 function rand(iMin,iMax) { return parseInt(Math.random()*(iMax-iMin))+iMin; } //把小于10的数前加0 function toDouble(num) { if(num<10) { return '0'+num; } else { return ''+num; }
如何动态设置css的float(cssFloat/styleFloat)
Jxchen
04-05 2501
sdfsdf //<![CDATA[ window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.style.float = 'right'; } //]]> 以上写法是不可以的，必须这样写 sdfsdf     //<![CDATA[
查找数组最小值，并反回最小值的在数组中的位置
Jxchen
06-18 2358
//<![CDATA[ window.onload = function() { var aa=[2,3,43,43,5,345,435,4,35,43,4,23,2,3123,12,3,0]; var iMin = 999999999; var index = -1; for(var i = 0; i < aa.length;i++) { aa[i].index
探索CSS3/JS创新技术：50个精彩实例解析
1. **转换（Transforms）**：允许元素在二维或三维空间内进行旋转、缩放、移动和倾斜，如在`CSS3AnalogueClock`示例中创建的模拟时钟。 2. **过渡（Transitions）**：平滑地在两种样式之间进行过渡，增强了用户交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值