-
-
算盘数字时钟[HTML]（可复制源代码） <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>算盘数字时钟</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js”></script> <script src=”https://libs.baidu.com/jquery/2.1.4/jquery.min.js”></script> <style> :root{–body-background-color:#f9e792;–abacus-height:200px;–abacus-width:350px;–bar-height:10px;–bar-width:350px;–bar-color:#fcb950;–bar-border-width:2px;–border-color:#212b51;–bead-line-width:4px;–bead-line-color:#686e7c;–bead-height:16px;–bead-width:16px;–bead-red:#fb394d;–bead-blue:#5292ff;–bead-yellow:#f8d96b;–bead-green:#86d14a;–bead-teal:#78d597}html,body{height:100%;width:100%;background-color:var(–body-background-color);font-family:”Rubik”,sans-serif;overflow:hidden}.container{height:100%;width:100%;position:relative;display:flex;justify-content:center;align-items:center;margin:auto}.abacus{height:var(–abacus-height);width:var(–abacus-width);position:relative;display:flex;flex-direction:column}.bar{height:var(–bar-height);width:var(–bar-width);border:var(–bar-border-width) solid var(–border-color);background-color:var(–bar-color);border-radius:40px;position:relative;overflow:hidden}.bar::before{content:””;position:absolute;height:100%;width:100%;background-color:rgba(0,0,0,0.1);left:0;right:0;bottom:70%;margin:auto}.beads-container{display:flex;justify-content:space-around;padding:0;margin:0;align-items:center;list-style-type:none}.beads-container-top{flex-grow:2}.beads-container-bottom{flex-grow:4}.beads-container .bead-line{height:100%;width:var(–bead-line-width);border:2px solid var(–border-color);position:relative;border-radius:40px;background-color:var(–bead-line-color)}.beads-container .bead-line .display-number{position:absolute;top:calc(-1.5 * var(–bar-height));left:50%;height:40px;width:40px;margin:auto;transform:translateX(-50%) translateY(-100%);display:inline-flex;justify-content:center;align-items:center;font-size:1.4rem;font-weight:600}.beads-container .bead-line .bead{position:absolute;height:var(–bead-height);width:var(–bead-width);border:1px solid;border-radius:200px;left:50%;transform:translateX(-50%);border:2px solid var(–border-color);background-color:var(–bead-blue);overflow:hidden;transition:all ease 0.25s}.beads-container .bead-line .bead::before,.beads-container .bead-line .bead::after{content:””;position:absolute;border-radius:500px;border:0px solid transparent}.beads-container .bead-line .bead::before{height:100%;width:104%;bottom:0px;border-bottom-width:4px;border-style:solid;border-bottom-color:rgba(0,0,0,0.45);transform:rotate(35deg)}.beads-container .bead-line .bead::after{height:70%;width:70%;border-top-color:#ffffff;border-width:2px;top:3px;bottom:0;left:0;right:0;margin:auto;transform:rotate(45deg)}.beads-container-bottom .bead-line .bead:nth-child(1){background-color:var(–bead-red)}.beads-container-bottom .bead-line .bead:nth-child(2){background-color:var(–bead-blue)}.beads-container-bottom .bead-line .bead:nth-child(3){background-color:var(–bead-green)}.beads-container-bottom .bead-line .bead:nth-child(4){background-color:var(–bead-yellow)}.beads-container-bottom .bead-line .bead:nth-child(1){bottom:57px}.beads-container-bottom .bead-line .bead:nth-child(2){bottom:38px}.beads-container-bottom .bead-line .bead:nth-child(3){bottom:19px}.beads-container-bottom .bead-line .bead:nth-child(4){bottom:0px}.beads-container-top .bead-line .bead{background-color:var(–bead-teal);top:0}.beads-container-top .bead-line.five .bead{top:calc(95% – var(–bead-height))}.beads-container-bottom .bead-line.one .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.two .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.two .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.three .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.three .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.three .bead:nth-child(3){bottom:calc(100% – 57px)}.beads-container-bottom .bead-line.four .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.four .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.four .bead:nth-child(3){bottom:calc(100% – 57px)}.beads-container-bottom .bead-line.four .bead:nth-child(4){bottom:calc(100% – 76px)}.beads-container-bottom .bead-line.six .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.six .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.six .bead:nth-child(3){bottom:calc(100% – 57px)}.beads-container-bottom .bead-line.six .bead:nth-child(4){bottom:calc(100% – 76px)}.beads-container-bottom .bead-line.six .bead:nth-child(5){bottom:calc(100% – 95px)}.beads-container-bottom .bead-line.seven .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.seven .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.seven .bead:nth-child(3){bottom:calc(100% – 57px)}.beads-container-bottom .bead-line.seven .bead:nth-child(4){bottom:calc(100% – 76px)}.beads-container-bottom .bead-line.seven .bead:nth-child(5){bottom:calc(100% – 95px)}.beads-container-bottom .bead-line.seven .bead:nth-child(6){bottom:calc(100% – 114px)}.beads-container-bottom .bead-line.eight .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.eight .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.eight .bead:nth-child(3){bottom:calc(100% – 57px)}.beads-container-bottom .bead-line.eight .bead:nth-child(4){bottom:calc(100% – 76px)}.beads-container-bottom .bead-line.eight .bead:nth-child(5){bottom:calc(100% – 95px)}.beads-container-bottom .bead-line.eight .bead:nth-child(6){bottom:calc(100% – 114px)}.beads-container-bottom .bead-line.eight .bead:nth-child(7){bottom:calc(100% – 133px)}.beads-container-bottom .bead-line.nine .bead:nth-child(1){bottom:calc(100% – 19px)}.beads-container-bottom .bead-line.nine .bead:nth-child(2){bottom:calc(100% – 38px)}.beads-container-bottom .bead-line.nine .bead:nth-child(3){bottom:calc(100% – 57px)}.beads-container-bottom .bead-line.nine .bead:nth-child(4){bottom:calc(100% – 76px)}.beads-container-bottom .bead-line.nine .bead:nth-child(5){bottom:calc(100% – 95px)}.beads-container-bottom .bead-line.nine .bead:nth-child(6){bottom:calc(100% – 114px)}.beads-container-bottom .bead-line.nine .bead:nth-child(7){bottom:calc(100% – 133px)}.beads-container-bottom .bead-line.nine .bead:nth-child(8){bottom:calc(100% – 152px)} </style> </head> <body> <div class=”container”> <div class=”abacus”> <div class=”bar bar-top”></div> <ul class=”beads-container beads-container-top”> <li class=”bead-line hours-first”> <div class=”bead”></div> <div class=”display-number”></div> </li> <li class=”bead-line hours-last”> <div class=”bead”></div> <div class=”display-number”></div> </li> <li class=”bead-line minutes-first”> <div class=”bead”></div> <div class=”display-number”></div> </li> <li class=”bead-line minutes-last”> <div class=”bead”></div> <div class=”display-number”></div> </li> <li class=”bead-line seconds-first”> <div class=”bead”></div> <div class=”display-number”></div> </li> <li class=”bead-line seconds-last”> <div class=”bead”></div> <div class=”display-number”></div> </li> </ul> <div class=”bar bar-center”></div> <ul class=”beads-container beads-container-bottom”> <li class=”bead-line hours-first”> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> </li> <li class=”bead-line hours-last”> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> </li> <li class=”bead-line minutes-first”> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> </li> <li class=”bead-line minutes-last”> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> </li> <li class=”bead-line seconds-first”> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> </li> <li class=”bead-line seconds-last”> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> <div class=”bead”></div> </li> </ul> <div class=”bar bar-bottom”></div> </div> </div> </body> <script> $(document).ready(function(){$(“.abacus”).each(function(_,abacus){var NumArray=[“zero”,”one”,”two”,”three”,”four”,”five”,”one”,”two”,”three”,”four”];var topBeadsContainer=$(abacus).find(“.beads-container-top”);var topHoursLast=$(topBeadsContainer).find(“.hours-last”);var hoursLastDisplayNumber=$(topHoursLast).find(“.display-number”);var topHoursFirst=$(topBeadsContainer).find(“.hours-first”);var hoursFirstDisplayNumber=$(topHoursFirst).find(“.display-number”);var topMinutesLast=$(topBeadsContainer).find(“.minutes-last”);var minutesLastDisplayNumber=$(topMinutesLast).find(“.display-number”);var topMinutesFirst=$(topBeadsContainer).find(“.minutes-first”);var minutesFirstDisplayNumber=$(topMinutesFirst).find(“.display-number”);var topSecondsLast=$(topBeadsContainer).find(“.seconds-last”);var secondsLastDisplayNumber=$(topSecondsLast).find(“.display-number”);var topSecondsFirst=$(topBeadsContainer).find(“.seconds-first”);var secondsFirstDisplayNumber=$(topSecondsFirst).find(“.display-number”);var bottomBeadsContainer=$(abacus).find(“.beads-container-bottom”);var bottomHoursLast=$(bottomBeadsContainer).find(“.hours-last”);var bottomHoursFirst=$(bottomBeadsContainer).find(“.hours-first”);var bottomMinutesLast=$(bottomBeadsContainer).find(“.minutes-last”);var bottomMinutesFirst=$(bottomBeadsContainer).find(“.minutes-first”);var bottomSecondsLast=$(bottomBeadsContainer).find(“.seconds-last”);var bottomSecondsFirst=$(bottomBeadsContainer).find(“.seconds-first”);setInterval(function(){var date=new Date();var secondsObject=digitsToObject(date.getSeconds());var minutesObject=digitsToObject(date.getMinutes());var hoursObject=digitsToObject(date.getHours());$(secondsFirstDisplayNumber).text(secondsObject.firstDigit);$(secondsLastDisplayNumber).text(secondsObject.secondDigit);$(minutesFirstDisplayNumber).text(minutesObject.firstDigit);$(minutesLastDisplayNumber).text(minutesObject.secondDigit);$(hoursFirstDisplayNumber).text(hoursObject.firstDigit);$(hoursLastDisplayNumber).text(hoursObject.secondDigit);if(secondsObject.firstDigit!==5){$(bottomSecondsFirst).removeClass(NumArray).addClass(NumArray[secondsObject.firstDigit]);secondsObject.firstDigit>5?$(topSecondsFirst).addClass(“five”):$(topSecondsFirst).removeClass(“five”)}else{$(topSecondsFirst).addClass(“five”);$(bottomSecondsFirst).removeClass(NumArray)}if(secondsObject.secondDigit!==5){$(bottomSecondsLast).removeClass(NumArray).addClass(NumArray[secondsObject.secondDigit]);secondsObject.secondDigit>5?$(topSecondsLast).addClass(“five”):$(topSecondsLast).removeClass(“five”)}else{$(topSecondsLast).addClass(“five”);$(bottomSecondsLast).removeClass(NumArray)}if(minutesObject.firstDigit!==5){$(bottomMinutesFirst).removeClass(NumArray).addClass(NumArray[minutesObject.firstDigit]);minutesObject.firstDigit>5?$(topMinutesFirst).addClass(“five”):$(topMinutesFirst).removeClass(“five”)}else{$(topMinutesFirst).addClass(“five”);$(bottomMinutesFirst).removeClass(NumArray)}if(minutesObject.secondDigit!==5){$(bottomMinutesLast).removeClass(NumArray).addClass(NumArray[minutesObject.secondDigit]);minutesObject.secondDigit>5?$(topMinutesLast).addClass(“five”):$(topMinutesLast).removeClass(“five”)}else{$(topMinutesLast).addClass(“five”);$(bottomMinutesLast).removeClass(NumArray)}if(hoursObject.firstDigit!==5){$(bottomHoursFirst).removeClass(NumArray).addClass(NumArray[hoursObject.firstDigit]);hoursObject.firstDigit>5?$(topHoursFirst).addClass(“five”):$(topHoursFirst).removeClass(“five”)}else{$(topHoursFirst).addClass(“five”);$(bottomHoursFirst).removeClass(NumArray)}if(hoursObject.secondDigit!==5){$(bottomHoursLast).removeClass(NumArray).addClass(NumArray[hoursObject.secondDigit]);hoursObject.secondDigit>5?$(topHoursLast).addClass(“five”):$(topHoursLast).removeClass(“five”)}else{$(topHoursLast).addClass(“five”);$(bottomHoursLast).removeClass(NumArray)}},1000)});function digitsToObject(number){return{firstDigit:parseInt(number/10),secondDigit:parseInt(number%10)}}}); </script> </html>
-
-
-
-