我的博客中的时钟

Posted 2020-10-15 瘪哥

在这里首先说明，这个时钟，制作者不是我，我也是度娘找到的，只是为了适应博客，做了修改，虽然做了修改，但是大小我没有调整，博客园边栏原始大小是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部分放什么好