JQuery简易时间轴功能
以下是一个使用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元素，动态生成时间轴的列表项。
评论已关闭