css3实现24小时时间刻度效果

css3实现24小时时间刻度效果

安心落意

1927人浏览 · 2022-06-14 16:39:06

安心落意 · 2022-06-14 16:39:06 发布

提示：本文讲解如何通过css实现24小时时间刻度轴的效果

文章目录

前言
一、24小时时间刻度效果应该怎么实现？
二、操作步骤
- 1.编写css代码
- 2.html代码编写
总结

前言

提示：本文讲解如何通过css实现24小时时间刻度轴的效果

一、24小时时间刻度效果应该怎么实现？

我们想要的效果是，自适应，宽度100%，并且分成24等份，100/24=4.1666，则每个小时所占的宽度是4.1666%，这里我们统一使用百分比来实现。

二、操作步骤

1.编写css代码

代码如下（示例）：

        .timer {
            position: relative;
            width: 100%;
            margin: 20px auto;
            height: 14px;
        }

        .timer .hh, .timer .mm {
            position: absolute;
            border-left: 1px solid #555;
            height: 14px;
            width: 4.166%;
        }

        .timer .hh:after {
            position: absolute;
            left:-4px;
            bottom: -15px;
            font: 11px/1 sans-serif;
        }

        .timer .mm {
            height: 5px;
        }

        .timer .hh:nth-of-type(1):after {
            content: "0";
        }

        .timer .hh:nth-of-type(2):after {
            content: "1";
        }

        .timer .hh:nth-of-type(3):after {
            content: "2";
        }

        .timer .hh:nth-of-type(4):after {
            content: "3";
        }

        .timer .hh:nth-of-type(5):after {
            content: "4";
        }

        .timer .hh:nth-of-type(6):after {
            content: "5";
        }

        .timer .hh:nth-of-type(7):after {
            content: "6";
        }

        .timer .hh:nth-of-type(8):after {
            content: "7";
        }

        .timer .hh:nth-of-type(9):after {
            content: "8";
        }

        .timer .hh:nth-of-type(10):after {
            content: "9";
        }

        .timer .hh:nth-of-type(11):after {
            content: "10";
        }

        .timer .hh:nth-of-type(12):after {
            content: "11";
        }

        .timer .hh:nth-of-type(13):after {
            content: "12";
        }

        .timer .hh:nth-of-type(14):after {
            content: "13";
        }

        .timer .hh:nth-of-type(15):after {
            content: "14";
        }

        .timer .hh:nth-of-type(16):after {
            content: "15";
        }

        .timer .hh:nth-of-type(17):after {
            content: "16";
        }

        .timer .hh:nth-of-type(18):after {
            content: "17";
        }

        .timer .hh:nth-of-type(19):after {
            content: "18";
        }

        .timer .hh:nth-of-type(20):after {
            content: "19";
        }

        .timer .hh:nth-of-type(21):after {
            content: "20";
        }

        .timer .hh:nth-of-type(22):after {
            content: "21";
        }

        .timer .hh:nth-of-type(23):after {
            content: "22";
        }

        .timer .hh:nth-of-type(24):after {
            content: "23";
        }

        .timer .hh:nth-of-type(25):after {
            content: "0";
        }
        .timer .hh:nth-of-type(25) {
            width:1px;
        }

        .timer .mm:nth-of-type(1) {
            left: 50%;
        }

2.html代码编写

代码如下（示例）：

    <div id="timer" class='timer'></div>
    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        let timer = $("#timer")
        for(var i = 0; i <= 24; i++) {
            let left = i * 4.166
            if (i < 24) {
                timer.append(`<div class="hh" style="left:${left}%"><div class="mm"></div></div>`)
            } else {
                timer.append(`<div class="hh" style="left:${left}%"></div>`)
            }
        }
    </script>

完整HTML代码如下：

<html>

<head>
    <style>
        .timer {
            position: relative;
            width: 100%;
            margin: 20px auto;
            height: 14px;
        }

        .timer .hh, .timer .mm {
            position: absolute;
            border-left: 1px solid #555;
            height: 14px;
            width: 4.166%;
        }

        .timer .hh:after {
            position: absolute;
            left:-4px;
            bottom: -15px;
            font: 11px/1 sans-serif;
        }

        .timer .mm {
            height: 5px;
        }

        .timer .hh:nth-of-type(1):after {
            content: "0";
        }

        .timer .hh:nth-of-type(2):after {
            content: "1";
        }

        .timer .hh:nth-of-type(3):after {
            content: "2";
        }

        .timer .hh:nth-of-type(4):after {
            content: "3";
        }

        .timer .hh:nth-of-type(5):after {
            content: "4";
        }

        .timer .hh:nth-of-type(6):after {
            content: "5";
        }

        .timer .hh:nth-of-type(7):after {
            content: "6";
        }

        .timer .hh:nth-of-type(8):after {
            content: "7";
        }

        .timer .hh:nth-of-type(9):after {
            content: "8";
        }

        .timer .hh:nth-of-type(10):after {
            content: "9";
        }

        .timer .hh:nth-of-type(11):after {
            content: "10";
        }

        .timer .hh:nth-of-type(12):after {
            content: "11";
        }

        .timer .hh:nth-of-type(13):after {
            content: "12";
        }

        .timer .hh:nth-of-type(14):after {
            content: "13";
        }

        .timer .hh:nth-of-type(15):after {
            content: "14";
        }

        .timer .hh:nth-of-type(16):after {
            content: "15";
        }

        .timer .hh:nth-of-type(17):after {
            content: "16";
        }

        .timer .hh:nth-of-type(18):after {
            content: "17";
        }

        .timer .hh:nth-of-type(19):after {
            content: "18";
        }

        .timer .hh:nth-of-type(20):after {
            content: "19";
        }

        .timer .hh:nth-of-type(21):after {
            content: "20";
        }

        .timer .hh:nth-of-type(22):after {
            content: "21";
        }

        .timer .hh:nth-of-type(23):after {
            content: "22";
        }

        .timer .hh:nth-of-type(24):after {
            content: "23";
        }

        .timer .hh:nth-of-type(25):after {
            content: "0";
        }
        .timer .hh:nth-of-type(25) {
            width:1px;
        }

        .timer .mm:nth-of-type(1) {
            left: 50%;
        }
    </style>
</head>

<body>
    <div id="timer" class='timer'></div>
    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        let timer = $("#timer")
        for(var i = 0; i <= 24; i++) {
            let left = i * 4.166
            if (i < 24) {
                timer.append(`<div class="hh" style="left:${left}%"><div class="mm"></div></div>`)
            } else {
                timer.append(`<div class="hh" style="left:${left}%"></div>`)
            }
        }
    </script>
</body>

</html>

最终实现的效果图：

总结

献给共同学习的你

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

华为开发者空间

cover

GaussDB高智能--库内AI引擎：模型管理&数据集管理

华为开发者空间

cover

GaussDB高智能--库内AI引擎：机器学习算法的训练和推理

华为开发者空间

所有评论(0)

查看更多评论

安心落意

已为社区贡献2条内容