JQuery简易时间轴功能

作者：System 时间：2024年08月13日分类：所有,jquery 字数：1481

以下是一个使用jQuery创建简易时间轴的示例代码。这个时间轴将展示一个时间段内的每一小时。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易时间轴</title>
    <style>
        .time-axis { list-style-type: none; }
        .time-axis li { 
            margin-bottom: 5px; 
            padding-left: 20px; 
            position: relative; 
        }
        .time-axis li:before { 
            content: ''; 
            position: absolute; 
            left: -20px; 
            top: 5px; 
            width: 20px; 
            height: 20px; 
            border: 2px solid #000; 
            border-radius: 50%; 
            background-color: #000; 
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<ul class="time-axis"></ul>
 
<script>
    $(document).ready(function() {
        var startTime = '08:00'; // 时间轴开始时间
        var endTime = '18:00';   // 时间轴结束时间
        var $timeAxis = $('ul.time-axis');
 
        // 将开始和结束时间转换为小时数
        var startHour = parseInt(startTime.split(':')[0], 10);
        var endHour = parseInt(endTime.split(':')[0], 10);
 
        // 循环遍历每一个小时
        for (var hour = startHour; hour <= endHour; hour++) {
            var timeStr = (hour < 10 ? '0' : '') + hour + ':00'; // 格式化时间
            $timeAxis.append('<li>' + timeStr + '</li>');
        }
    });
</script>
 
</body>
</html>

这段代码会创建一个简单的时间轴，从上午8点开始，到下午6点结束，每个时间点之前有一个小时的标记。这个示例展示了如何使用jQuery来操作DOM元素，动态生成时间轴的列表项。

JQuery简易时间轴功能

评论已关闭

推荐阅读