jquery实现八卦带指针时钟效果代码-html代码-BFW代码库

jquery实现八卦带指针时钟效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现八卦带指针时钟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="width=device-width, user-scalable=no,initial-scale=1.0" name="viewport">

    <style type="text/css">
        * {
	margin:0;
	padding:0
}
body {
	overflow-x:hidden;
	background:#d6d5d552
}
#clock {
	position:relative;
	width:300px;
	height:300px;
	margin:20px auto 0 auto;
	background:url(//repo.bfw.wiki/bfwrepo/images/clock/clockface.png);
	background-size:contain;
	list-style:none
}
#sec,#min,#hour {
	position:absolute;
	width:15px;
	height:300px;
	top:0;
	left:142.5px;
	background-size:contain
}
#sec {
	background-image:url(//repo.bfw.wiki/bfwrepo/images/clock/s.png);
	background-repeat:no-repeat;
	z-index:3;
	background-position:0 1.2px
}
#min {
	background-image:url(//repo.bfw.wiki/bfwrepo/images/clock/m.png);
	background-repeat:no-repeat;
	z-index:2;
	background-position:0 1.2px
}
#hour {
	background-image:url(//repo.bfw.wiki/bfwrepo/images/clock/h.png);
	background-repeat:no-repeat;
	z-index:1;
	background-position:0 1.2px
}
p {
	text-align:center;
	padding:10px 0 0 0
}
.button {
	margin-top:1em
}
#start {
	background-image:url(//repo.bfw.wiki/bfwrepo/images/clock/button.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	display:inline-block;
	width:70px;
	height:70px
}
.button {
	text-align:center
}
.button a {
	color:#fff;
	padding:5px 5px;
	border-radius:5px;
	text-decoration:none;
	margin-right:10px
}

    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <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
            })
        },.........完整代码请登录后点击上方下载按钮下载查看