HTML5+CSS3+JS小实例：上下滚动的数字时钟

耀南.

已于 2023-12-27 10:45:41 修改

阅读量619

点赞数 9

分类专栏：前端好玩炫酷的动画小案例文章标签： html5 css3 javascript

于 2023-12-27 10:34:43 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/135239326

版权

前端好玩炫酷的动画小案例专栏收录该内容

115 篇文章 11 订阅

订阅专栏

话不多说看效果 V代码运行！！！

核心代码：

HTML:

<!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="yaonan.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="yaonan.js"></script>
</body>

</html>

CSS:

/* 引入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;
}

JS:

// 单个数字的垂直偏移量
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);

制作不易，觉得好用就点个赞收藏叭！！！