倒計時數字滾動切換(需要的圖片放在下面，請下載後改成對應名字,放在同一目錄下)
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<head>
<style>
body {
background: #607D8B;
}
.numbergroup {
display: flex;
justify-content: space-between;
width: 270px;
margin: auto;
background: #e6e3e3;
padding: 25px;
position:relative;
box-shadow:0 10px 5px rgba(0,0,0,.3);
overflow: hidden;
border-radius: 5px;
}
.numbergroup:after{
position:absolute;
bottom:3%;
left:1%;
overflow:hidden;
width:98%;
height:94%;
content:'';
border-radius:30px;
z-index: 1;
box-shadow:inset 0 0 200px #b4b4b4;
}
.number {
width: 60px;
height: 90px;
background: #302f2f;
font-size: 60px;
color: #d3d3d3;
line-height: 90px;
text-align: center;
font-family: sans-serif;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
text-shadow: 1px 2px 1px #fff;
z-index: 2;
cursor: pointer;
overflow: hidden;
}
.numberrow {
width: 60px;
height: 90px;
}
.maohao {
width: 15px;
background: transparent;
font-size: 60px;
color: #302f2f;
line-height: 90px;
text-align: center;
font-family: sans-serif;
z-index: 2;
}
.planegroup {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
background: url('./earth.png') center center no-repeat;
background-color: #302f2f;
background-size: 110% 110%;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.12);
}
.plane {
top: 0;
position: absolute;
width: 100%;
height: 100%;
background: url('./plane.png') center top no-repeat;
background-size: 15% 15%;
}
#plane {
top: 0;
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="numbergroup">
<div class="number">
<div class="numberrow">0</div>
<div class="numberrow">1</div>
<div class="numberrow">2</div>
<div class="numberrow">3</div>
<div class="numberrow">4</div>
<div class="numberrow">5</div>
<div class="numberrow">6</div>
<div class="numberrow">7</div>
<div class="numberrow">8</div>
<div class="numberrow">9</div>
</div>
<div class="number">
<div class="numberrow">0</div>
<div class="numberrow">1</div>
<div class="numberrow">2</div>
<div class="numberrow">3</div>
<div class="numberrow">4</div>
<div class="numberrow">5</div>
<div class="numberrow">6</div>
<div class="numberrow">7</div>
<div class="numberrow">8</div>
<div class="numberrow">9</div>
</div>
<div class="maohao">:</div>
<div class="number">
<div class="numberrow">0</div>
<div class="numberrow">1</div>
<div class="numberrow">2</div>
<div class="numberrow">3</div>
<div class="numberrow">4</div>
<div class="numberrow">5</div>
<div class="numberrow">6</div>
<div class="numberrow">7</div>
<div class="numberrow">8</div>
<div class="numberrow">9</div>
</div>
<div class="number">
<div class="numberrow">0</div>
<div class="numberrow">1</div>
<div class="numberrow">2</div>
<div class="numberrow">3</div>
<div class="numberrow">4</div>
<div class="numberrow">5</div>
<div class="numberrow">6</div>
<div class="numberrow">7</div>
<div class="numberrow">8</div>
<div class="numberrow">9</div>
</div>
</div>
<div class="planegroup">
<canvas id="plane" width="300px" height="300px"></canvas>
<div class="plane"></div>
</div>
</body>
<script>
var q = 0, b = 0, s = 0, g = 0;
var bool = true;
setInterval(function() {
if (bool) {
g = g + 1;
if (g == 10) {
s = s + 1;
g = 0;
if (s == 6) {
b = b + 1;
s = 0;
if (b == 10) {
q = q + 1;
b = 0;
if (q == 6) {
bool = false;
}
}
}
}
}
cartoon(q, 0);
cartoon(b, 1);
cartoon(s, 2);
cartoon(g, 3);
}, 1000);
function cartoon(s, i) {
if (s != 0) {
$('.number:eq('+ i +')').animate({'scrollTop':s * 90}, 500);
} else {
$('.number:eq('+ i +')').scrollTop(0);
}
}
var cvs = document.getElementById("plane").getContext('2d');
cvs.lineWidth = 2;
// cvs.strokeStyle = '#FFCC80';
cvs.strokeStyle = '#FFF';
cvs.setLineDash([10,5]);
var i = -0.5;
var deg = 0;
setInterval(function() {
cvs.beginPath();
cvs.clearRect(0, 0, 300, 300);
i = i - 0.01;
if(i <= -2.5) {
i = -2.5;
}
deg -= 1.8
if (deg == - 360) {
deg = 0;
}
$(".plane").css("transform", 'rotate('+ deg +'deg)');
$(".planegroup").css("transform", 'rotate('+ Math.abs(deg / 9) +'deg)');
cvs.arc(150,150,125,i*Math.PI,-0.5*Math.PI);
cvs.stroke();
}, 20);
</script>
</html>
改爲plane.png
改爲earth.png
