当前位置 CSS模版园 >> 酷炫特效 >> ​css+div+js 时钟效果

​css+div+js 时钟效果

​css+div+js 时钟效果

css+div+js时钟效果

css:

.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%;
}

html:

<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>

js:

$(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);
});


声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-60.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)