元旦(新年)倒计时

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元旦倒计时</title>  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html { height: 100%; background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); overflow: hidden; } body { background: transparent; color: #ffffff; } .bluelight { text-shadow: 0 0 10px #3498DB, 0 0 20px #3498DB, 0 0 30px #3498DB, 0 0 40px #2980B9, 0 0 70px #2980B9, 0 0 80px #2980B9, 0 0 100px #2980B9, 0 0 150px #2980B9; } .clock { overflow: hidden; } .col-md-12 { overflow: hidden; padding-bottom: 20px; } .top-pane { margin-bottom: 0px; border-radius: 5px 5px 0px 0px; background-color: #34495E; border: 0px; } .bottom-pane { margin-top: 0px; border-radius: 0px 0px 5px 5px; background-color: #2C3E50; border: 0px; } @media (min-width: 768px) { .num { font-size: 100px; } } @media (max-width: 767px) { .num { font-size: 50px; } } @media (max-width: 480px) { .num { font-size: 30px; } } @media (min-width: 768px) { .text { font-size: 35px; } } @media (max-width: 767px) { .text { font-size: 20px; } } @media (max-width: 480px) { .text { font-size: 15px; } } @media (min-width: 768px) { body { padding-top: 75px; } } h1 { padding-top: 10px; } @media (min-width: 768px) { h1 { margin-bottom: 75px; font-size: 100px; } } </style> </head> <body> <div class="wrapper"> <div class="container text-center"> <div class="col-md-12"> <h1 id="header" class="">元旦倒计时</h1> </div> <div class="col-md-3 col-xs-6"> <div class="clock"> <div class="well top-pane"> <div id="days" class="num">00</div> </div> <div class="well bottom-pane"> <div id="days-text" class="text">Days</div> </div> </div> </div> <div class="col-md-3 col-xs-6"> <div class="clock"> <div class="well top-pane"> <div id="hours" class="num">00</div> </div> <div class="well bottom-pane"> <div id="hours-text" class="text">Hours</div> </div> </div> </div> <div class="col-md-3 col-xs-6"> <div class="clock"> <div class="well top-pane"> <div id="mins" class="num">00</div> </div> <div class="well bottom-pane"> <div id="mins-text" class="text">Minutes</div> </div> </div> </div> <div class="col-md-3 col-xs-6"> <div class="clock"> <div class="well top-pane"> <div id="secs" class="num">00</div> </div> <div class="well bottom-pane"> <div id="secs-text" class="text">Seconds</div> </div> </div> </div> <div id="info" class="small"></div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> function timeLeft(endtime){ var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor( (t/1000) % 60 ); var minutes = Math.floor( (t/1000/60) % 60 ); var hours = Math.floor( (t/(1000*60*60)) % 24 ); var days = Math.floor( t/(1000*60*60*24) ); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; }; $(document).ready(function() { var today = new Date(); var deadline = 'January 1 ' + (today.getFullYear() + 1) + " 00:00:00"; if (today.getMonth() == 0 && today.getDate() == 1) { deadline = 'January 1 ' + (today.getFullYear()) + " 00:00:00"; }; $("#header").hover(function() { $(this).toggleClass('bluelight'); }); $(".clock").hover(function() { $(this).toggleClass('bluelight'); }); var setClock = function(newyear){ var timeinterval = setInterval(function(){ var t = timeLeft(newyear); $('#days').text(t.days); $('#hours').text(t.hours); $('#mins').text(('0' + t.minutes).slice(-2)); $('#secs').text(('0' + t.seconds).slice(-2)); if(t.total<=0){ clearInterval(timeinterval); var now = new Date(); var yearStr = now.getFullYear().toString(); $('#header').text("Happy New Year!!!"); $('#days').text(yearStr[0]); $('#days-text').text("Happy"); $('#hours').text(yearStr[1]); $('#hours-text').text("New"); $('#mins').text(yearStr[2]); $('#mins-text').text("Year"); $('#secs').text(yearStr[3]); $('#secs-text').text("!!!"); $('#info').text("Countdown starts again tomorrow!"); } },1000); }; setClock(deadline); }); </script> </html>

提示：你可以先修改部分代码再运行。

研究大佬写的倒计时组件(Vue)，学到了不少东西

转载请注明：有爱前端 » 元旦(新年)倒计时