0

我有一个简单的页面来显示开始测验的剩余时间。我将此代码用于倒数计时器：

$(document).ready(function () {
  var clock;
  clock = $('.clock').FlipClock(
    863999999, {
      clockFace: 'DailyCounter',
      countdown: true,
      callbacks: {
        stop: function () {
          /* alert("Hello") */
        }
      }
    });
});			
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>

<div class="clock" style="margin:40px;"></div>

有没有比“flip clock.js”更简单、更轻便的东西，不使用jquery作为核心？（完全是javascript）

4

2 回答 2

0

我找到了解决方案：

        function getTimeRemaining(endtime) {
            var t = endtime;
            var seconds = Math.floor(t % 60);
            var minutes = Math.floor((t / 60) % 60);
            var hours = Math.floor((t / (60 * 60)) % 24);
            var days = Math.floor(t / (60 * 60 * 24));
            return {
                'total': t,
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
        }


        function initializeClock(endtime) {

            var daysSpan = document.getElementById('days');
            var hoursSpan = document.getElementById('hours');
            var minutesSpan = document.getElementById('minutes');
            var secondsSpan = document.getElementById('seconds');

            function updateClock() {
                endtime = endtime - 1;
                var t = getTimeRemaining(endtime);

                daysSpan.innerHTML = t.days;
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

                if (t.total < 1) {
                    clearInterval(timeinterval);
                    alert("Hello");
                }
            }

            updateClock();
            var timeinterval = setInterval(updateClock, 1000);
        }
body{
	text-align: center;
	background: #00ECB9;
    font-family: sans-serif;
    font-weight: 100;
}
h1{
    color: #396;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}
#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #00BF96;
	display: inline-block;
}
#clockdiv div > span{
	padding: 15px;
	border-radius: 3px;
	background: #00816A;
	display: inline-block;
}
.smalltext{
	padding-top: 5px;
	font-size: 16px;
}
<html>
    <head>
        <title>some title</title>
    </head>
    <body onload="initializeClock(863999999);">
        <h1>Countdown Clock</h1>
        <div id="clockdiv">
            <div>
                <span id="days"></span>
                <div class="smalltext">Days</div>
            </div>
            <div>
                <span id="hours"></span>
                <div class="smalltext">Hours</div>
            </div>
            <div>
                <span id="minutes"></span>
                <div class="smalltext">Minutes</div>
            </div>
            <div>
                <span id="seconds"></span>
                <div class="smalltext">Seconds</div>
            </div>
        </div>

        
    </body>
</html>

但我需要 javascript 专业人员检查我的代码是否存在错误。

于 2016-06-20T15:10:41.803 回答
0

http://bl.ocks.org/deltafactory/6e1cb71cfc8bb169181d

使用 CSS 和 HTML5 纯粹而简单。动画应该没问题......

于 2016-06-20T13:20:14.933 回答