js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果，当时也是网上找了很久没有找到，就自己写了一个，现在发出来给有需要的人，代码写的可能有点乱。
效果图：
下面是美工做的设计图的效果（有个美工就是好）：
下面是客户端源代码：
<html>
<head>
<style type="text/css">
#container
{
font-size: 12px;
background-color: #ffffff;
border: 1px solid #cccccc;
position: relative;
margin: 0;
}
#stationContainer
{
background-color: #E5ECFF;
float: left;
width: 150px;
padding-top: 30px;
position: relative;
z-index: 200;
border-right: 1px solid black;
}
#stationContainer .station
{
border-top: 1px solid black;
width: 100%;
float: left;
height: 100px;
z-index: 300;
}
#timeContainer
{
float: left;
display: inline;
position: absolute;
z-index: 100;
width: 900px;
overflow: hidden;
}
#scrollContainer
{
position: relative;
}
#timeHeader
{
height: 30px;
background-color: #eeeeee;
position: relative;
overflow: hidden;
}
#timeHeader .unitTime
{
width: 4px;
float: left;
border-left: 1px solid black;
z-index: 100;
height: 10px;
margin-top: 20px;
position: absolute;
}
#timeHeader .halfHour
{
margin-top: 10px;
height: 20px;
}
#timeHeader .hour
{
height: 30px;
margin-top: 0px;
}
#timeBody
{
position: relative;
}
#timeBody .horizontalStation
{
position: relative;
width: 100%;
border-top: 1px solid black;
height: 100px;
z-index: 10;
}
#footer
{
clear: both;
width: 100%;
height: 20px;
background-color: #808080;
border-bottom: 1px solid #808080;
}
#timeLine
{
left: 500px;
border-right: 1px solid red;
float: left;
z-index: 100;
background-color: Red;
margin-top: 30px;
position: absolute;
} .techinian
{
width: 100%;
height: 100%;
}
.techinian td
{
text-align: center;
}
.techinian .stationTd
{
width: 60px;
border-right: 1px solid black;
}
.car
{
height: 25%;
display: inline;
float: left;
width: 100px;
border: 1px solid #000000;
padding: 0px;
background-color: lightsteelblue;
text-decoration: none;
position: absolute;
outline: none;
margin-top: 5px;
top: 1px;
bottom: 1px;
font-family: 黑体;
color: Black;
font-size: large;
}
.virtual
{
border: 2px dashed #000000;
}
a.car:hover
{
cursor: pointer;
background-color: Fuchsia;
text-decoration: none;
}
.color0
{
background-color: Green;
}
.color70
{
background-color: Yellow;
}
.color100
{
background-color: Red;
}
</style>
<style type="text/css">
.border_bottom
{
border-bottom: 1px solid black;
}
.border_top
{
border-top: 1px solid black;
}
.border_right
{
border-right: 1px solid black;
}
.border_left
{
border-left: 1px solid black;
}
.border_none
{
border: 0 none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
Date.prototype.format = function (format) {
var o =
{
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
return format;
} function MockTime(hour)
{
var now = new Date();
return new Date(now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate()+' '+hour+':00:00');
} </script>
<script type="text/javascript">
var unitMinute = 5, halfHourCount = 30 / unitMinute, hourCount = 60 / unitMinute;
var unitCount = 24 * (60 / unitMinute);
var unitPx = 5; //每个格子的宽度加边框
var timelineInitLeft = 150;
var headerHeight = 30;
// 从服务端读取时间轴的开始和结束时间
//var validTime = new Date('<%=DateTime.Today.Date.Add(Xindeco.Bmw.Infrastruction.DefaultSetting.StationStartValid).ToString("yyyy/MM/dd HH:mm:ss")%>');
//var invalidTime = new Date('<%=DateTime.Today.Date.Add(Xindeco.Bmw.Infrastruction.DefaultSetting.StationEndInvalid).ToString("yyyy/MM/dd HH:mm:ss")%>');
var now = new Date();
//从服务端读取服务器时间，使客户端和服务器时间同步
var serverTime = now; //静态页面测试直接赋值为客户端时间
var offsetTime = now -serverTime ;
var validTime = MockTime(8);
var invalidTime= MockTime(18); $(function () {
var headerWidth = $("#container").width() - $("#stationContainer").width();
unitPx = headerWidth / ((invalidTime - validTime) / 60000 / unitMinute); for (var i = 0; i < unitCount; i++) {
var classstr = " ";
var hourstr = "";
if (i % hourCount == 0) {
classstr = "hour";
hourstr = i / hourCount;
}
else if (i % halfHourCount == 0)
classstr = "halfHour";
var unitTime = $("<div id='time_" + i + "' class='unitTime " + classstr + "'>" + hourstr + "</div>");
unitTime.css('left', i * unitPx);
$("#timeHeader").append(unitTime); }
$("#scrollContainer").width(unitCount * unitPx);
$("#timeLine").height($("#stationContainer").height());
$("#timeContainer").width($("#footer").width() - timelineInitLeft);
ScrollToTime(validTime.getHours(), invalidTime.getMinutes());
SetTimeNow();
}); function SetTimeNow() {
serverTime.setTime(new Date().getTime() + offsetTime);
SetTimeLineByTime(serverTime.getHours(), serverTime.getMinutes());
} function ScrollToTime(hour, min) {
var count = (hourCount * hour + Math.round(min / unitMinute));
$("#scrollContainer").css("left", -$("#time_" + count).position().left);
} function SetTimeLineByTime(hour, min) { var dateTime = new Date(serverTime.getFullYear(), serverTime.getMonth(), serverTime.getDate(), hour, min, 0); console.log(dateTime);
if (dateTime < validTime || dateTime > invalidTime) {
$("#timeLine").hide();
return;
}
$("#timeLine").show();
var count = (hourCount * hour + Math.round(min / unitMinute));
$("#timeLine").css("left", $("#time_" + count).position().left + $("#scrollContainer").position().left + $("#stationContainer").width());
} function SetCarPositionByTime(car, hour, min) {
var count = (hourCount * hour + Math.round(min / unitMinute));
$(car).css('left', $("#time_" + count).position().left);
SetHeight($(car));
} function AutoScroll() {
try {
serverTime.setTime(new Date().getTime() + offsetTime);
SetTimeLineByTime(serverTime.getHours(), serverTime.getMinutes());
} catch (e) {
}
} </script>
<script type="text/javascript">
window['selectedCar'] = '';
function Car(carData) {
var id = carData.ID;
var carNo = carData.CarNo;
var text = carData.DisplayText;
var stationId = carData.StationId;
//模拟的数据不需要做转换
//var startTime = ConvertJSONDateToJSDateObject(carData.StartTime);
//var endTime = ConvertJSONDateToJSDateObject(carData.EndTime);
var startTime = carData.StartTime;
var endTime = carData.EndTime;
var durationMinute = carData.TotalMinutes;
var isVirtual = carData.IsVirtual;
var title = "";
var colorClass = "";
if (carData.DisplayStartTime != null && carData.DisplayEndTime != null) {
title = ConvertJSONDateToJSDateObject(carData.DisplayStartTime).format("yyyy/MM/dd hh:mm") + "-" + ConvertJSONDateToJSDateObject(carData.DisplayEndTime).format("yyyy/MM/dd hh:mm");
}
if (carData.Percent != null) {
var color = "";
if (carData.Percent < 70)
color = 0;
else if (carData.Percent >= 70 && carData.Perent < 100)
color = 70;
else if (carData.Percent >= 100)
color = 100;
colorClass = "color" + color;
}
var car = $("<a id='car_" + id + "' href=\"#\" title='" + title + "' stationId='" + stationId + "' class=\"car " + colorClass + " " + (isVirtual ? 'virtual' : '') + "\"><div>" + text + "</div></a>");
car.width(unitPx * durationMinute / unitMinute);
car.click(function () {
if (carData.ReachId != null) {
$(".panel .dxb img").hide();
if (typeof ShowMsg != 'undefined') ShowMsg($("#msg"), "已选择:" + carNo);
window["selectedId"] = carData.ReachId;
}
});
Car.prototype.Show = function () {
$("#station_" + stationId).append(car);
SetCarPositionByTime(car, startTime.getHours(), startTime.getMinutes());
}
} function SetHeight(dstCar) {
var cars = $("a[stationid='" + dstCar.attr("stationId") + "']");
for (var i = 0; i < cars.length; i++) {
var car = $(cars[i]);
if (car.attr('id') != dstCar.attr('id') && (car.position().left + car.width()) > dstCar.position().left + 2) {
dstCar.css('top', car.position().top + car.height() + 4);
}
}
} function Station(stationId) {
var station = $("<div id='station_" + stationId + "' class=\"horizontalStation\"></div>");
station.height($(".station:first").height());
Station.prototype.Show = function () {
$("#timeBody").append(station);
}
} function ConvertJSONDateToJSDateObject(jsondate) {
var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));
return date;
} function LoadData() {
return MockData();
//从服务端读取面板上需要显示的数据,包括所在工位，开始时间结束时间,以及其他需要显示的备注信息
var url = '<%=ResolveClientUrl("~/Handler/AutoDispatcher.ashx") %>?groupcodes=<%=string.Join(",", groupCodes) %>&r=' ;
$.getJSON(url+ Math.random(), function (data) {
window["data"] = data;
var stations = $("div.station[data-key]");
$("#timeBody").html('');
for (var i = 0; i < stations.length; i++) {
var stationId = $(stations[i]).attr('data-key');
var station = new Station(stationId);
station.Show();
var carList = data[stationId];
if (typeof carList == 'undefined') continue;
for (var j = 0; j < carList.length; j++) {
var startTime = new Date();
var carData = carList[j];
var car = new Car(carData);
car.Show();
}
}
});
} function MockData()
{
var data= {'1':[
{ID:1,CarNo:'闽12345',DisplayText:'维修中',StationId:1,StartTime:MockTime(9),EndTime:MockTime(13),isVirtual:false,TotalMinutes:300,Percent:80},
{ID:2,CarNo:'闽22345',DisplayText:'等待中',StationId:1,StartTime:MockTime(14),EndTime:MockTime(16),isVirtual:false,TotalMinutes:200,Percent:50}
],'2':[
{ID:3,CarNo:'闽12345',DisplayText:'维修中',StationId:2,StartTime:MockTime(8),EndTime:MockTime(12),isVirtual:false,TotalMinutes:300,Percent:80},
{ID:4,CarNo:'闽22345',DisplayText:'等待中',StationId:2,StartTime:MockTime(13),EndTime:MockTime(14),isVirtual:false,TotalMinutes:200,Percent:50}
],'3':[
{ID:5,CarNo:'闽12345',DisplayText:'维修中',StationId:3,StartTime:MockTime(10),EndTime:MockTime(13),isVirtual:false,TotalMinutes:300,Percent:80},
{ID:6,CarNo:'闽22345',DisplayText:'等待中',StationId:3,StartTime:MockTime(15),EndTime:MockTime(16),isVirtual:false,TotalMinutes:200,Percent:50}
],'4':[
{ID:7,CarNo:'闽12345',DisplayText:'维修中',StationId:4,StartTime:MockTime(9),EndTime:MockTime(12),isVirtual:false,TotalMinutes:300,Percent:80},
{ID:8,CarNo:'闽22345',DisplayText:'等待中',StationId:4,StartTime:MockTime(13),EndTime:MockTime(15),isVirtual:false,TotalMinutes:200,Percent:50}
]};
window["data"] = data;
var stations = $("div.station[data-key]");
$("#timeBody").html('');
for (var i = 0; i < stations.length; i++) {
var stationId = $(stations[i]).attr('data-key');
var station = new Station(stationId);
station.Show();
var carList = data[stationId];
if (typeof carList == 'undefined') continue;
for (var j = 0; j < carList.length; j++) {
var carData = carList[j];
var car = new Car(carData);
car.Show();
}
}
} function Loop() {
AutoScroll();
LoadData();//.complete(function () { setTimeout('Loop()', 20000) });
} window['LoadData'] = LoadData; $(function () {
Loop();
});
</script>
</head>
<body>
<div id="container">
<div id="stationContainer">
<div class="station" data-key='1'>
<table border="0" class="techinian" cellpadding="0" cellspacing="0">
<tr>
<td rowspan='4' class="stationTd">
工位1
</td>
<td class='border_bottom'>
技师1
</td>
</tr>
<tr>
<td class='border_bottom'>
技师2
</td>
</tr>
<tr>
<td class='border_bottom'>
技师3
</td>
</tr>
<tr>
<td class=''>
技师4
</td>
</tr>
</table>
</div>
<div class="station" data-key='2'>
<table border="0" class="techinian" cellpadding="0" cellspacing="0">
<tr>
<td rowspan='4' class="stationTd">
工位2
</td>
<td class='border_bottom'>
技师5
</td>
</tr>
<tr>
<td class='border_bottom'>
技师6
</td>
</tr>
<tr>
<td class='border_bottom'>
技师7
</td>
</tr>
<tr>
<td class=''>
技师8
</td>
</tr>
</table>
</div>
<div class="station" data-key='3'>
<table border="0" class="techinian" cellpadding="0" cellspacing="0">
<tr>
<td rowspan='4' class="stationTd">
工位3
</td>
<td class='border_bottom'>
技师9
</td>
</tr>
<tr>
<td class='border_bottom'>
技师10
</td>
</tr>
<tr>
<td class='border_bottom'>
技师11
</td>
</tr>
<tr>
<td class=''>
技师12
</td>
</tr>
</table>
</div>
<div class="station" data-key='4'>
<table border="0" class="techinian" cellpadding="0" cellspacing="0">
<tr>
<td rowspan='4' class="stationTd">
工位4
</td>
<td class='border_bottom'>
技师13
</td>
</tr>
<tr>
<td class='border_bottom'>
技师14
</td>
</tr>
<tr>
<td class='border_bottom'>
技师3
</td>
</tr>
<tr>
<td class=''>
技师15
</td>
</tr>
</table>
</div>
</div>
<div id="timeContainer">
<div id="scrollContainer">
<div id="timeHeader">
<div class="unitTime">
<!---->
</div>
</div>
<div id="timeBody">
<div class="horizontalStation">
<a href="#" class="car">
<div>
车辆1
</div>
</a><a href="#" class="car">
<div>
车辆1
</div>
</a><a href="#" class="car">
<div>
车辆1
</div>
</a><a href="#" class="car">
<div>
车辆1
</div>
</a>
</div>
</div>
</div>
</div>
<div id="timeLine">
</div>
<div style="clear: both;">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
js实现的时间轴效果的更多相关文章
- JS时间轴效果(类似于qq空间时间轴效果)
在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 ...
- Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果
Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- CSS3实现时间轴效果
原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...
- 使用ExpandableListView时间轴效果达到
不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import ...
- Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
- Android时间轴效果，直接使用在你的项目中
近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧 watermark/2/text/aHR0cDovL2 ...
- SmohanTimeLine.js 酷炫的时间轴效果
展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidt ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
随机推荐
- wesome-android
awesome-android Introduction android libs from github System requirements Android Notice If the lib ...
- 使用poi读取word2007(.docx)中的复杂表格
使用poi读取word2007(.docx)中的复杂表格 最近工作需要做一个读取word(.docx)中的表格,并以html形式输出.经过上网查询,使用了poi. 对于2007及之后的word文档,需 ...
- 查看tensorflow pb模型文件的节点信息
查看tensorflow pb模型文件的节点信息: import tensorflow as tf with tf.Session() as sess: with open('./quantized_ ...
- 无损压缩算法历史——熵编码是最早出现的，后来才有Lzx这些压缩算法
Lossless Entropy type Unary Arithmetic Asymmetric Numeral Systems Golomb Huffman Adaptive Canonic ...
- Codeforces--626B--Cards（模拟）
Cards Time Limit: 2000MS Memory Limit: 262144KB 64bit IO Format: %I64d & %I64u Submit Sta ...
- 支撑百亿级应用的 NewSQL
支撑百亿级应用的 NewSQL https://zhuanlan.zhihu.com/newsql/ 项目背景 初次接触 TiDB,是通过同程网首席架构师王晓波先生的分享,当时同程网正在使开发和数据库 ...
- bzoj4034 [HAOI2015]树上操作——树链剖分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4034 树剖裸题: 一定要注意 long long !!! update 的时候别忘了 pus ...
- Linux学习教程
前言 “Linux?听说是一个操作系统,好用吗?” “我也不知道呀,和windows有什么区别?我能在Linux上玩LOL吗” “别提了,我用过Linux,就是黑乎乎一个屏幕,鼠标也不能用,不停地的敲 ...
- Scala学习1————scala开发环境搭建（windows 10）
Scala开发环境搭建 先讲几点我学习scala的目的或者原因吧: JVM在企业中的霸主地位,Scala也是JVM上的语言,很有可能未来会从Java过度到Scala也不是不可能. 先进的函数式编程和面 ...
- .net core2.0 自定义中间件
一.中间件(Middleware) 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件. 二.编写SimpleMiddleware using Microsoft.AspNetCore.Htt ...