Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字时钟</title>
<link rel="stylesheet" href="./122-数字时钟.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<ul class="numbers hours hoursFirst">
<li><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
<ul class="numbers hours hoursLast">
<li><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
<ul class="numbers minutes minutesFirst">
<li><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
<ul class="numbers minutes minutesLast">
<li><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
<ul class="numbers seconds secondsFirst">
<li><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
<ul class="numbers seconds secondsLast">
<li><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
</div>
</body>
<script src="./122-数字时钟.js"></script>
</html>
CSS
@import url("https://fonts.googleapis.com/css?family=Anton");
body {
background-color: #2e282a;
font-family: "Anton", sans-serif;
}
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
transform: rotateX(-90deg);
transform-style: preserve-3d;
}
.numbers {
height: 200px;
width: 50px;
padding: 0;
position: relative;
margin: auto;
list-style-type: none;
transform-style: preserve-3d;
transform: rotateY(90deg);
transition: all ease 0.5s;
display: inline-block;
}
.numbers li {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
height: 50%;
width: 0;
transform-style: preserve-3d;
transform-origin: bottom;
box-sizing: border-box;
}
.numbers li span {
height: 50px;
width: 50px;
display: inline-block;
border-radius: 2px;
text-align: center;
font-size: 5rem;
line-height: 50px;
backface-visibility: hidden;
transform-style: preserve-3d;
transform: translateX(-50%) translateY(-40px) rotateX(90deg) rotate(90deg);
}
.numbers li:nth-child(1) {
transform: rotate(0deg);
}
.numbers li:nth-child(2) {
transform: rotate(-36deg);
}
.numbers li:nth-child(3) {
transform: rotate(-72deg);
}
.numbers li:nth-child(4) {
transform: rotate(-108deg);
}
.numbers li:nth-child(5) {
transform: rotate(-144deg);
}
.numbers li:nth-child(6) {
transform: rotate(-180deg);
}
.numbers li:nth-child(7) {
transform: rotate(-216deg);
}
.numbers li:nth-child(8) {
transform: rotate(-252deg);
}
.numbers li:nth-child(9) {
transform: rotate(-288deg);
}
.numbers li:nth-child(10) {
transform: rotate(-324deg);
}
.numbers.hours li span {
color: #76b041;
}
.numbers.minutes li span {
color: #17bebb;
}
.numbers.seconds li span {
color: #ffc914;
}
JavaScript
$(document).ready(function () {
const getFirstDigit = (x) => parseInt(x / 10);
const getLastDigit = (x) => parseInt(x % 10);
setInterval(() => {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
$(".secondsLast").css({
'transform': 'rotateY(90deg) rotate(' + getLastDigit(seconds) * 36 + 'deg)',
});
$(".secondsFirst").css({
'transform': 'rotateY(90deg) rotate(' + getFirstDigit(seconds) * 36 + 'deg)',
});
$(".minutesLast").css({
'transform': 'rotateY(90deg) rotate(' + getLastDigit(minutes) * 36 + 'deg)',
});
$(".minutesFirst").css({
'transform': 'rotateY(90deg) rotate(' + getFirstDigit(minutes) * 36 + 'deg)',
});
$(".hoursLast").css({
'transform': 'rotateY(90deg) rotate(' + getLastDigit(hours) * 36 + 'deg)',
});
$(".hoursFirst").css({
'transform': 'rotateY(90deg) rotate(' + getFirstDigit(hours) * 36 + 'deg)',
});
}, 1000);
});
实现思路拆分
CSS 部分
@import url("https://fonts.googleapis.com/css?family=Anton");
引入Google字体“Anton”。
body {
background-color: #2e282a;
font-family: "Anton", sans-serif;
}
设置页面背景颜色和字体。
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
transform: rotateX(-90deg);
transform-style: preserve-3d;
}
定义时钟容器的样式。
.numbers {
height: 200px;
width: 50px;
padding: 0;
position: relative;
margin: auto;
list-style-type: none;
transform-style: preserve-3d;
transform: rotateY(90deg);
transition: all ease 0.5s;
display: inline-block;
}
定义数字的样式。
.numbers li {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
height: 50%;
width: 0;
transform-style: preserve-3d;
transform-origin: bottom;
box-sizing: border-box;
}
定义数字列表项的样式。
.numbers li span {
height: 50px;
width: 50px;
display: inline-block;
border-radius: 2px;
text-align: center;
font-size: 5rem;
line-height: 50px;
backface-visibility: hidden;
transform-style: preserve-3d;
transform: translateX(-50%) translateY(-40px) rotateX(90deg) rotate(90deg);
}
定义数字的样式。
.numbers.hours li span {
color: #76b041;
}
定义小时数字的颜色。
.numbers.minutes li span {
color: #17bebb;
}
定义分钟数字的颜色。
.numbers.seconds li span {
color: #ffc914;
}
定义秒钟数字的颜色。
JavaScript 部分
$(document).ready(function () {
const getFirstDigit = (x) => parseInt(x / 10);
const getLastDigit = (x) => parseInt(x % 10);
setInterval(() => {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
$(".secondsLast").css({
'transform': 'rotateY(90deg) rotate(' + getLastDigit(seconds) * 36 + 'deg)',
});
$(".secondsFirst").css({
'transform': 'rotateY(90deg) rotate(' + getFirstDigit(seconds) * 36 + 'deg)',
});
$(".minutesLast").css({
'transform': 'rotateY(90deg) rotate(' + getLastDigit(minutes) * 36 + 'deg)',
});
$(".minutesFirst").css({
'transform': 'rotateY(90deg) rotate(' + getFirstDigit(minutes) * 36 + 'deg)',
});
$(".hoursLast").css({
'transform': 'rotateY(90deg) rotate(' + getLastDigit(hours) * 36 + 'deg)',
});
$(".hoursFirst").css({
'transform': 'rotateY(90deg) rotate(' + getFirstDigit(hours) * 36 + 'deg)',
});
}, 1000);
});
当文档加载完成后,设置定时器每秒更新时钟。
© 版权声明
开心狐社区友情提示:文章版权归作者所有,未经允许请勿转载,如果发现盗用文章等情况请联系发帖人进行删除。
THE END
暂无评论内容