skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第132个小实例：上下滚动的数字时钟

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-04-01 16:51:15 +08:00
parent 1f2fd685a6
commit 544896e2c4
4 changed files with 183 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -138,4 +138,5 @@
128. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效
129. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效（下）
130. HTML5+CSS3小实例：传送带式的loading加载动画
131. HTML5+CSS3小实例：纯CSS实现打字动画特效
131. HTML5+CSS3小实例：纯CSS实现打字动画特效
132. HTML5+CSS3+JS小实例：上下滚动的数字时钟

61
code/132/132.css Normal file
View File

@ -0,0 +1,61 @@
/* 引入Jura字体 */
@import url("http://fonts.googleapis.com/css?family=Jura:200,300,400,500,600,700,800,900");
*{
margin: 0;
padding: 0;
}
body{
background-color: #0e141b;
color: #e0e6eb;
font-family: 'Jura';
font-weight: 300;
text-align: center;
letter-spacing: 8px;
overflow: hidden;
}
.column,
.colon{
/* 行内块元素 */
display: inline-block;
font-size: 86px;
line-height: 86px;
/* 顶部对齐 */
vertical-align: top;
}
.column{
/* 设置过渡 */
transition: 0.3s;
}
/* 冒号 */
.colon{
/* 垂直居中（偏上一点） */
transform: translateY(calc(50vh - 55px));
/* 过渡 */
transition: 0.3s;
}
.colon::after{
content: ":";
}
/* 数字默认样式 */
.num{
opacity: 0.25;
transition: 0.5s;
}
/* 当前时间（正中间数字） */
.num.visible{
opacity: 1;
text-shadow: 1px 1px 0 #2c6299;
}
/* 邻近的 */
.num.near{
opacity: 0.35;
}
/* 远的 */
.num.far{
opacity: 0.15;
}
/* 更远的（越远越透明） */
.num.distant{
opacity: 0.1;
}

76
code/132/132.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>上下滚动的数字时钟</title>
<link rel="stylesheet" href="132.css">
</head>
<body>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
</div>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
</div>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
</div>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
</div>
<script src="132.js"></script>
</body>
</html>

44
code/132/132.js Normal file
View File

@ -0,0 +1,44 @@
// 单个数字的垂直偏移量
let size = 86;
// 把所有的.column转为数组
let columns = Array.from(document.getElementsByClassName('column'));
// 样式名数组
let class_list = ['visible', 'near', 'far', 'far', 'distant', 'distant'];
// true=24小时制，false=12小时制
let is_24_hour_clock = true;
// 获取时分秒
function getClock() {
let d = new Date();
let hour = is_24_hour_clock ? d.getHours() : d.getHours() % 12 || 12;
hour = hour < 10 ? '0' + hour : hour;
let minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
let second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
return hour + '' + minute + '' + second;
}
// 获取对应的样式名
function getClass(n, i) {
return class_list.find(function (_class, class_index) {
return i - class_index === n || i + class_index === n;
}) || '';
}
// 定时器，一秒执行一次
setInterval(() => {
// 获取时间
let c = getClock();
// 遍历所有.column
columns.forEach(function (ele, i) {
// 获取时分秒的每一位数，并转为整型
let n = parseInt(c[i]);
// 计算偏移量
let offset = -n * size;
// 设置每一位数的位置
ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + (size / 2) + 'px))';
// 接下来设置样式
// 将.column的子元素（.num）转为数组，并遍历它
Array.from(ele.children).forEach(function(ele2,i2){
// 设置每一位数的样式（透明度改变）
ele2.className='num '+getClass(n,i2);
})
})
}, 1000);