我正在尝试制作类似于https://codepen.io/blucube/pen/pgqRKr/的翻转时钟。 javascript是这样编写的,如果代码运行,那么页面应该显示当前时间,并在秒数框上轻弹,每秒都会改变。但是,该页面没有显示javascript文件无法加载的任何原因。这是我的代码:
function flipTo(digit, n) {
var current = digit.attr('data-num');
digit.attr('data-num', n);
digit.find('.front').attr('data-content', current);
digit.find('.back, .under').attr('data-content', n);
digit.find('.flap').css('display', 'block');
setTimeout(function() {
digit.find('.base').text(n);
digit.find('.flap').css('display', 'none');
}, 350);
}
function jumpTo(digit, n) {
digit.attr('data-num', n);
digit.find('.base').text(n);
}
function updateGroup(group, n, flip) {
var digit1 = $('.ten' + group);
var digit2 = $('.' + group);
n = String(n);
if (n.length == 1) n = '0' + n;
var num1 = n.substr(0, 1);
var num2 = n.substr(1, 1);
if (digit1.attr('data-num') != num1) {
if (flip) flipTo(digit1, num1);
else jumpTo(digit1, num1);
}
if (digit2.attr('data-num') != num2) {
if (flip) flipTo(digit2, num2);
else jumpTo(digit2, num2);
}
}
function setTime(flip) {
var t = new Date();
updateGroup('hour', t.getHours(), flip);
updateGroup('min', t.getMinutes(), flip);
updateGroup('sec', t.getSeconds(), flip);
}
$(document).ready(function() {
setTime(false);
setInterval(function() {
setTime(true);
}, 1000);
});

html {
height: 100%;
}
body {
height: 100%;
background: #85D8CE;
background: linear-gradient(135deg, #085078, #85D8CE);
}
.digit {
position: relative;
float: left;
width: 10vw;
height: 15vw;
background-color: #fff;
border-radius: 1vw;
text-align: center;
font-family: Oswald, sans-serif;
font-size: 11vw;
}
.base {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #333;
}
.flap {
display: none;
position: absolute;
width: 100%;
height: 50%;
background-color: #fff;
left: 0;
top: 0;
border-radius: 1vw 1vw 0 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.flap::before {
content: attr(data-content);
position: absolute;
left: 50%;
}
.flap.front::before,
.flap.under::before {
top: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.flap.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flap.back::before {
top: 100%;
-webkit-transform: translate(-50%, -50%) rotateZ(180deg);
transform: translate(-50%, -50%) rotateZ(180deg);
}
.flap.over {
z-index: 2;
}
.flap.under {
z-index: 1;
}
.flap.front {
-webkit-animation: flip-down-front 300ms ease-in both;
animation: flip-down-front 300ms ease-in both;
}
.flap.back {
-webkit-animation: flip-down-back 300ms ease-in both;
animation: flip-down-back 300ms ease-in both;
}
.flap.under {
-webkit-animation: fade-under 300ms ease-in both;
animation: fade-under 300ms ease-in both;
}
@-webkit-keyframes flip-down-front {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #fff;
color: #333;
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #a6a6a6;
color: black;
}
}
@keyframes flip-down-front {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #fff;
color: #333;
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #a6a6a6;
color: black;
}
}
@-webkit-keyframes flip-down-back {
0% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
background-color: #a6a6a6;
color: black;
}
100% {
-webkit-transform: rotateY(180deg) rotateX(180deg);
transform: rotateY(180deg) rotateX(180deg);
background-color: #fff;
color: #333;
}
}
@keyframes flip-down-back {
0% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
background-color: #a6a6a6;
color: black;
}
100% {
-webkit-transform: rotateY(180deg) rotateX(180deg);
transform: rotateY(180deg) rotateX(180deg);
background-color: #fff;
color: #333;
}
}
@-webkit-keyframes fade-under {
0% {
background-color: #a6a6a6;
color: black;
}
100% {
background-color: #fff;
color: #333;
}
}
@keyframes fade-under {
0% {
background-color: #a6a6a6;
color: black;
}
100% {
background-color: #fff;
color: #333;
}
}
.clock {
position: absolute;
width: 70vw;
top: 50%;
left: 15vw;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-perspective: 100vw;
perspective: 100vw;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.clock .digit {
margin-right: 1vw;
}
.clock .digit:nth-child(2n+2) {
margin-right: 3.5vw;
}
.clock .digit:last-child {
margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="clock">
<div class="digit tenhour">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit hour">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit tenmin">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit min">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit tensec">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
<div class="digit sec">
<span class="base"></span>
<div class="flap over front"></div>
<div class="flap over back"></div>
<div class="flap under"></div>
</div>
</div>
&#13;