注册 登录 充值会员 退出
毕业设计 PHP源码
充值

jQuery八卦图算风水时钟插件

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-01-15
jQuery八卦图算风水时钟插件
这是一款具有中国风的特色的jQuery八卦图背景算风水时钟插件,jQuery网页时间代码。


js代码

<script type="text/javascript">
var isStop = -1;
$(document).ready(function() {
	var si1 = setInterval(function() {
		var seconds = new Date().getSeconds();
		var sdegree = seconds * 6;
		var srotate = "rotate(" + sdegree + "deg)";
		$("#sec").css({
			"-moz-transform": srotate,
			"-webkit-transform": srotate
		})
	}, 1000);
	var si2 = setInterval(function() {
		var hours = new Date().getHours();
		var mins = new Date().getMinutes();
		var hdegree = hours * 30 + (mins / 2);
		var hrotate = "rotate(" + hdegree + "deg)";
		$("#hour").css({
			"-moz-transform": hrotate,
			"-webkit-transform": hrotate
		})
	}, 1000);
	var si3 = setInterval(function() {
		var mins = new Date().getMinutes();
		var mdegree = mins * 6;
		var mrotate = "rotate(" + mdegree + "deg)";
		$("#min").css({
			"-moz-transform": mrotate,
			"-webkit-transform": mrotate
		})
	}, 1000);
	$("#start").click(function() {
		if (isStop == 1) {
			si1 = setInterval(function() {
				var seconds = new Date().getSeconds();
				var sdegree = seconds * 6;
				var srotate = "rotate(" + sdegree + "deg)";
				$("#sec").css({
					"-moz-transform": srotate,
					"-webkit-transform": srotate
				})
			}, 1000);
			si2 = setInterval(function() {
				var hours = new Date().getHours();
				var mins = new Date().getMinutes();
				var hdegree = hours * 30 + (mins / 2);
				var hrotate = "rotate(" + hdegree + "deg)";
				$("#hour").css({
					"-moz-transform": hrotate,
					"-webkit-transform": hrotate
				})
			}, 1000);
			si3 = setInterval(function() {
				var mins = new Date().getMinutes();
				var mdegree = mins * 6;
				var mrotate = "rotate(" + mdegree + "deg)";
				$("#min").css({
					"-moz-transform": mrotate,
					"-webkit-transform": mrotate
				})
			}, 1000);
			isStop = isStop * (-1)
		} else {
			clearInterval(si1);
			clearInterval(si2);
			clearInterval(si3);
			isStop = isStop * (-1)
		}
	})
});
</script>