• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

黑色酷炫css3数字时钟

精选代码 Tomy 202次浏览 已收录 0个评论 扫描二维码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑色酷炫css3数字时钟</title>
<meta name="keywords" content="时钟,css3时钟" />
<meta name="description" content="黑色酷炫css3数字时钟特效。" />
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.10.1/jquery.min.js"></script>

</head>

<style type="text/css">
body{background: black;margin: 0px;padding: 0px;}
.center_dot{position: absolute;width: 10px;height: 10px;background: black;left: 50%;;top:50%;border-radius:10px;}
.center_dote{position: absolute;width: 20px;height: 20px;background: rgb(221, 221, 56);left: 49.4%;;top:49.4%;border-radius:20px;}
.minute{position: absolute;width: 1px;height: 8px;background: white;}
.text{position: absolute;color: white;font-size: 35px;}
.secend_zhen{position: absolute;background: rgb(221, 221, 56);width:3px;height:300px;transform-origin: 50% 80%;}
.minute_zhen{position: absolute;background: white;width:3px;height:250px;transform-origin: 50% 83%;}
.hour_zhen{position: absolute;background: white;width:3px;height:200px;transform-origin: 50% 85%;}
</style>

<body>
<div class="minute"></div>
<div class="center_dote"></div>

<div class="secend_zhen"></div>
<div class="minute_zhen"></div>
<div class="hour_zhen"></div>
<div class="center_dot"></div>

<script type="text/javascript">
$(function(){

	var w=$(".center_dot").offset().left;
	$(".secend_zhen").css("left",w+3);
	$(".minute_zhen").css("left",w+3);
	$(".hour_zhen").css("left",w+3);
	$(".center_dot").css("left",w);
	var w1=$(".center_dot").offset().left-5;
	$(".center_dote").css("left",w1);
	var h=$(".center_dot").offset().top;
	$(".center_dot").css("top",h);
	$(".secend_zhen").css("top",h-236);
	$(".minute_zhen").css("top",h-205);
	$(".hour_zhen").css("top",h-166);
	var h1=$(".center_dot").offset().top-5;
	$(".center_dote").css("top",h1);

	for(var i=0;i<360;i++){
	
		if(i%6==0){
			var x=Math.round(240*Math.sin(i*Math.PI/180)+w);
			var y=Math.round(240*Math.cos((180+i)*Math.PI/180)+h);
	
		if(i%5==0){
	
			if(i/30<10){
				var time=i/30;
				time="0"+time;
				if(i==0){time=12;}
			}else{
				time=i/30;
			}
			$("body").append("<div class='text' style='left:"+(x-13)+"px; top:"+(y-15)+"px;'>"+time+"</div>");
			}else{
		
			$("body").append("<div class='minute' style='left:"+(x+5)+"px; top:"+(y)+"px;transform: rotate("+i+"deg);'"+"></div>");
			}
		}
	}
	
	
	var s=0;
	var m=0;
	var h=0;
	
	var date=new Date();
	var h1 = date.getHours(); 
	var m1 = date.getMinutes(); 
	var s1 = date.getSeconds(); 
	s=s1*6;
	m=m1*6+6*(s1/60);
	if(h1>12){h1=h1-12;}
	h=h1*30+30*(m1/60);
	secend_move();
	minute_move();
	hour_move();
	
	function secend_move(){
		var fd="rotate("+s+"deg)";
		$(".secend_zhen").css("transform",fd);
		s=s+6;
		if(s==360){s=0;}
	}
	function minute_move(){
		var md="rotate("+m+"deg)";
		$(".minute_zhen").css("transform",md);
		m=m+0.1;
		if(m==360){m=0;}
	}
	function hour_move(){
		var hd="rotate("+h+"deg)";
		$(".hour_zhen").css("transform",hd);
		h=h+0.5;
		if(h==360){h=0;}
	}

	setInterval(minute_move,1000);
	setInterval(secend_move,1000);
	setInterval(hour_move,1000*60);

});
</script>
</body>
</html>
代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明黑色酷炫css3数字时钟
喜欢 (1)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址