在这里首先说明,这个时钟,制作者不是我,我也是度娘找到的,只是为了适应博客,做了修改,虽然做了修改,但是大小我没有调整,博客园边栏原始大小是200,但是这个是400,要是有兴趣可以将时钟调整到200,我是将边栏调整到420
下面是代码
$("#blog-calendar").html("");//这段可要可不要,因为下面的html直接赋值会将原始的替换掉
$("#blog-calendar").html('<div class="box" style="width: 400px; height: 400px; border: 10px solid #220807; margin: 30px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative; " id="clock">'
+ '<!-- 原点 -->'
+ '<div class="origin" style="width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top: 190px; left: 190px; position: absolute;"></div>'
+ '<!-- 时钟数 -->'
+ '<div class="dot_box" style="width: inherit; height: inherit;">'
+ '<div class="dot" style="left: 180px; top: 340px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">6</div>'
+ '<div class="dot" style="left: 260px; top: 318.564px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">5</div>'
+ '<div class="dot" style="left: 318.564px; top: 260px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">4</div>'
+ '<div class="dot" style="left: 340px; top: 180px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">3</div>'
+ '<div class="dot" style="left: 318.564px; top: 100px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">2</div>'
+ '<div class="dot" style="left: 260px; top: 41.4359px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">1</div>'
+ '<div class="dot" style="left: 180px; top: 20px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">12</div>'
+ '<div class="dot" style="left: 100px; top: 41.4359px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">11</div>'
+ '<div class="dot" style="left: 41.4359px; top: 100px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">10</div>'
+ '<div class="dot" style="left: 20px; top: 180px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">9</div>'
+ '<div class="dot" style="left: 41.4359px; top: 260px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">8</div>'
+ '<div class="dot" style="left: 100px; top: 318.564px;width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute; ">7</div>'
+ '</div>'
+ '<!-- 时、分、秒针 -->'
+ '<div class="clock_line hour_line" id="hour_line" style="position: absolute; position: absolute; z-index: 20;transform: rotate(426deg);width: 100px; height: 4px; top: 198px; left: 200px; background-color: #000; border-radius: 2px; transform-origin: 0 50%; box-shadow: 1px -3px 8px 3px #aaa; "></div>'
+ '<div class="clock_line minute_line" style="position: absolute; position: absolute; z-index: 20;width: 130px; height: 2px; top: 199px; left: 190px; background-color: #000; transform-origin: 7.692% 50%; box-shadow: 1px -3px 8px 1px #aaa; transform: rotate(12deg);" id="minute_line"></div>'
+ '<div class="clock_line second_line" id="second_line" style="transform: rotate(84deg);position: absolute; position: absolute; z-index: 20;width: 170px; height: 1px; top: 199.5px; left: 180px; background-color: #f60; transform-origin: 11.765% 50%; box-shadow: 1px -3px 7px 1px #bbb; "></div>'
+ '<!-- 日期 -->'
+ '<div class="date_info" style="width: 160px; height: 28px; line-height: 28px; text-align: center; position: absolute; top: 230px; left: 120px; z-index: 11; color: #555; font-weight: bold; " id="date_info">2017年11月2日 星期二</div>'
+ '<!-- 时间 -->'
+ '<div class="time_info" style="width: 110px; height: 35px; line-height: 35px; text-align: center; position: absolute; top: 270px; left: 150px; z-index: 11; color: #555; background: #220807;">'
+ '<div class="time" style="width: 35px; height: 35px; float: left; color: #fff; font-size: 22px;" id="hour_time">17</div>'
+ '<div class="time" style="width: 35px; height: 35px; float: left; color: #fff; font-size: 22px;border-left: 1px solid #fff; border-right: 1px solid #fff;" id="minute_time">17</div>'
+ '<div class="time" style="width: 35px; height: 35px; float: left; color: #fff; font-size: 22px;" id="second_time">29</div>'
+ '</div>'
+ '<div class="clock-scale" style="transform: rotate(-90deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-84deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-78deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-72deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-66deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-60deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-54deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-48deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-42deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-36deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-30deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-24deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-18deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-12deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(-6deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(0deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(6deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(12deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(18deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(24deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(30deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(36deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(42deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(48deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(54deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(60deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(66deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(72deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(78deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(84deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(90deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(96deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(102deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(108deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(114deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(120deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(126deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(132deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(138deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(144deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(150deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(156deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(162deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(168deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(174deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(180deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(186deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(192deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(198deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(204deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(210deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(216deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(222deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(228deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(234deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(240deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(246deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(252deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(258deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div><div class="clock-scale" style="transform: rotate(264deg);width: 195px; height: 2px; transform-origin: 0% 50%; z-index: 7; position: absolute; top: 199px; left: 200px;"> <div class="scale-hidden" style="width: 183px; height: 2px; float: left;"></div><div class="scale-show" style="width: 12px; height: 2px; background-color: #555; float: left; "></div></div></div>');
var clock = document.getElementById("clock");
function initNumXY() {
// 1、12个数字的位置设置
var radius = 160;//大圆半价
var dot_num = 360 / $(".dot").length;//每个div对应的弧度数
//每一个dot对应的弧度;
var ahd = dot_num * Math.PI / 180;
$(".dot").each(function (index, el) {
$(this).css({
"left": 180 + Math.sin((ahd * index)) * radius,
"top": 180 + Math.cos((ahd * index)) * radius
});
});
// 2、刻钟设置
for (var i = 0; i < 60; i++) {
clock.innerHTML += "<div class='clock-scale'> " +
"<div class='scale-hidden'></div>" +
"<div class='scale-show'></div>" +
"</div>";
}
var scale = document.getElementsByClassName("clock-scale");
//var scale = $(".clock-scale");
//scale.each(function () {
// $(this).style.transform = "rotate(" + (i * 6 - 90) + "deg)";
//})
for (var i = 0; i < scale.length; i++) {
scale[i].style.transform = "rotate(" + (i * 6 - 90) + "deg)";
}
}
initNumXY();//调用上面的函数
//获取时钟id
var hour_line = document.getElementById("hour_line"),
minute_line = document.getElementById("minute_line"),
second_line = document.getElementById("second_line"),
date_info = document.getElementById("date_info"),//获取date_info
hour_time = document.getElementById("hour_time"),// 获去时间id
minute_time = document.getElementById("minute_time"),
second_time = document.getElementById("second_time");
//3、设置动态时间
function setTime() {
var nowdate = new Date();
//获取年月日时分秒
var year = nowdate.getFullYear(),
month = nowdate.getMonth() + 1,
day = nowdate.getDay(),
hours = nowdate.getHours(),
minutes = nowdate.getMinutes(),
seconds = nowdate.getSeconds(),
date = nowdate.getDate();
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
// 获取日期id
date_info.innerHTML = year + "年" + month + "月" + day + "日 " + weekday[day];
hour_time.innerHTML = hours >= 10 ? hours : "0" + hours;
minute_time.innerHTML = minutes >= 10 ? minutes : "0" + minutes;
second_time.innerHTML = seconds >= 10 ? seconds : "0" + seconds;
console.log(year + "年" + month + "月" + day + "日 " + weekday[day]);
//时分秒针设置
var hour_rotate = (hours * 30 - 90) + (Math.floor(minutes / 12) * 6);
hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
minute_line.style.transform = 'rotate(' + (minutes * 6 - 90) + 'deg)';
second_line.style.transform = 'rotate(' + (seconds * 6 - 90) + 'deg)';
}
// setTime();
setInterval(setTime, 1000);
这段代码放到博客园的侧边栏公告中,下面我讲截图放出来
除了这个时钟,其他样式都是我一点点修改的,但是代码显示部分没有做修改,这部分因为代码太多了,后面慢慢来
要是各位有幸看到这篇文章,可以提点建议给我,还不知道banner部分放什么好