css3--简单制作时钟

最新推荐文章于 2021-06-10 16:08:02 发布

您宁

最新推荐文章于 2021-06-10 16:08:02 发布

阅读量766

点赞数

分类专栏： javascript css3

本文链接：https://blog.csdn.net/qw765811529/article/details/48628623

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3闹钟</title>
		
		<style>
			.clock{
				width: 400px;
				height: 400px;
				border: 2px solid #BC8F8F;
				border-radius: 50%;
				box-shadow: 1px 1px 1px #8FA1FF;
				background: -webkit-gradient(radial,120 120,0,120 120,120,from(#ffe),to(#eee));
				background: -moz-radial-gradient(circle closest-side,#ffe 0%,#eee 100%);
				
			}
			
		</style>
		
		<script>
			/*****************开始********************/
							
			window.onload = function(){
				var div = document.getElementsByTagName("div")[0];
				drawMark(div);
				
				var date = new Date();
				var hour = date.getHours();
				var minute =date.getMinutes();
				var second = date.getSeconds();
				//console.log("时："hour+"分：" + minute + "秒：" + second);
				console.log(hour+":"+minute+":"+second);				
				var hours = drawPoint(div,8,80,210,210,"#000000",hour*30+minute*6/12-90);
				var minutes = drawPoint(div,5,130,210,210,"#000000",minute*6-90);
				var seconds = drawPoint(div,2,170,210,210,"#000000",second*6-90);
				
				var i = 1;
				setInterval(function(){
					//时间需要重新刷新才能获取最新的时间点
					var date1 = new Date();
					var hour1 = date1.getHours();
					var minute1 =date1.getMinutes();
					var second1 = date1.getSeconds();
					setCss3(hours,{"transform":"rotate("+(hour1*30+minute1*6/12-90)+"deg)","transform-origin":"0px 0px"});
					setCss3(minutes,{"transform":"rotate("+(minute1*6-90)+"deg)","transform-origin":"0px 0px"});
					setCss3(seconds,{"transform":"rotate("+(second1*6-90)+"deg)","transform-origin":"0px 0px"});
				},1000);
				
			};
			
			/******************结束*******************/
			
			/**
			 * @功能 刻度[60]
			 * @param obj 元素对象
			 * @return null
			 * **/
			function drawMark(obj){
				for(var i=0;i<60;i++){
					var width = 3;
					var height = 6;
					//
					if(i%5==0){
						width = 5;
						height = 10;
					}
					var div = document.createElement("div");
					div.style.cssText = "width: "+width+"px;"+
										"height:"+height+"px;"+
										"background:#000000;"+
										"position:absolute;"+
										"top:0px;"+
										"left:210px;";
		
					setCss3(div,{"transform":"rotate("+i*6+"deg)","transform-origin":"0 210px"});
					obj.appendChild(div)
				}
			}
			
			
			/**
			 *@功能 改变样式
			 * @param obj 元素对象
			 * 		  attrObj 样式
			 * @return null
			 * */
			function setCss3(obj,attrObj){
				for (var i in attrObj) {
					var newI = i;
					//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
					if(newI.indexOf("-")>0){
						var num = newI.indexOf("-");
						//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
						//replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
						newI.replace(newI.substr(num,2),newI.substr(num+1,1).toUpperCase());
					}
					
					obj.style[newI]=attrObj[i];
					//charAt() 方法可返回指定位置的字符。
					newI.replace(newI.charAt(0),newI.charAt(0).toUpperCase());
					obj.style["webkit"+newI]=attrObj[i];//chrome
					obj.style["moz"+newI]=attrObj[i];//firefox
					obj.style["o"+newI]=attrObj[i];//oprea
					obj.style["ms"+newI]=attrObj[i];//ie9
				}
			}
			
			
			/**
			 * @功能 绘制时分秒针
			 * @param 样式
			 * @return 成品
			 * **/
			function drawPoint(obj,width,height,top,left,color,angle){
				var div = document.createElement("div");
				div.style.cssText="width:"+width+"px;"+
								  "height:"+height+"px;"+
								  "position:absolute;"+
								  "top:"+top+"px;"+
								  "left:"+left+"px;"+
								  "background:"+color+";";
				setCss3(div,{"transform":"rotate("+angle+"deg)","transform-origin":"0px 0px"});
				obj.appendChild(div);
				return div;
			}
		</script>
	</head>
	<body>
		<div class="clock"></div>
	</body>
</html>

您宁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3--简单制作时钟

css3闹钟 .clock{ width: 400px; height: 400px; border: 2px solid #BC8F8F; border-radius: 50%; box-shadow: 1px 1px 1px #8FA1FF; background: -webkit-gradient(radial,120 120
复制链接

扫一扫

专栏目录