比翻转Clock.js更简单
[英]more simple than flip clock.js
问题描述
我有一个简单的页面来显示剩余的开始测验的时间。 我将这段代码用于倒数计时器：
$(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）
2 个解决方案
解决方案1
0 2016-06-20 13:20:14
http://bl.ocks.org/deltafactory/6e1cb71cfc8bb169181d
使用CSS和HTML5纯净而简单。 动画应该没问题。
解决方案2
0 2016-06-20 15:10:41
我找到了解决方案：
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专业人士检查我的代码中的错误。
解析 turned = !turned 的逻辑 一个简单的翻转卡片 JS Function
[英]Parsing the Logic of turned = !turned In A Simple Flip Card JS Function
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.