jQuery代码实现时钟效果

最新推荐文章于 2023-10-10 00:52:34 发布

今天又困了吗

最新推荐文章于 2023-10-10 00:52:34 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/weixin_45747582/article/details/102691707

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/lanrenzhijia.js"></script>
</body>
</html>

css

* {	margin:0;padding:0;}
body {background:#f9f9f9;}
#clock {position: relative;width: 600px;height: 600px;list-style: none;	margin: 20px auto;background: url('http://demo.lanrenzhijia.com/2014/time1017/images/clock.png') no-repeat center;}
#seconds, #minutes, #hours {position: absolute;width: 30px;height: 580px;left: 270px;}
#date {position: absolute;top: 365px;color: #333;right: 140px;font-weight: bold;letter-spacing: 3px;font-family: "Microsoft Yahei";	font-size: 30px;line-height: 36px;}
#hours {background: url('http://demo.lanrenzhijia.com/2014/time1017/images/hands.png') no-repeat left;z-index: 1000;}
#minutes {background: url('http://demo.lanrenzhijia.com/2014/time1017/images/hands.png') no-repeat center;width:25px;z-index: 2000;}
#seconds {background: url('http://demo.lanrenzhijia.com/2014/time1017/images/hands.png') no-repeat right;z-index: 3000;}

jquery

        $(function(){
// 设置html内容
var clock = [
	'<ul id="clock">',
	'<li id="date"></li>',
	'<li id="seconds"></li>',
	'<li id="hours"></li>',
	'<li id="minutes"></li>',
	'</ul>'].join('');
//将html内容引入到页面中
$(clock).fadeIn().appendTo('body');
(function Clock(){
	//获取系统当前时间
	var date = new Date().getDate(),
         hours = new Date().getHours(),
         minutes = new Date().getMinutes();
		 seconds = new Date().getSeconds(),
// 将获取的日期赋值给对应的html
	$("#date").html(date);
	var hrotate = hours * 30 + (minutes / 2);
    $("#hours").css({
		'transform'	:  'rotate('+ hrotate +'deg)',
		'-moz-transform'	:'rotate('+ hrotate +'deg)',
		'-webkit-transform'	:'rotate('+ hrotate +'deg)'
	});
	var mrotate = minutes * 6;
    $("#minutes").css({
		'transform'	:  'rotate('+ mrotate +'deg)',
		'-moz-transform'	:'rotate('+ mrotate +'deg)',
		'-webkit-transform'	:'rotate('+ mrotate +'deg)'
	});
    var srotate = seconds * 6;
    $("#seconds").css({
	    'transform'	:  'rotate('+ srotate +'deg)',
		'-moz-transform'	:'rotate('+ srotate +'deg)',
		'-webkit-transform'	:'rotate('+ srotate +'deg)'
	});
setTimeout(Clock,1000);
})();
});