算盘数字时钟[HTML](可复制源代码)
  • 累计撰写 120 篇文章
  • 累计收到 1 条评论

算盘数字时钟[HTML](可复制源代码)

2024-10-19 / 0 评论 / 227 阅读
<!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>
收藏

扫描二维码,在手机上阅读

评论一下?

OωO
取消