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时 ...
随机推荐
- Jmeter压测问题_Non HTTP response code: org.apache.http.conn.ConnectTimeoutException
负载机压测,线程500,服务器根本无压力,负载机本身发的请求都是失败的 Sample result如下: Thread Name: 考勤(考勤提交) 1-134 Sample Start: 2018- ...
- 使用Pods和自定义静态库实现多工程联编
使用Pods和自定义静态库实现多工程联编 字数607 阅读112 评论0 喜欢0 近来随着公司项目开发的深入,项目的规范也就越来越高了,为了更加方便的管理自定义静态库与pods之间的联系,好好的研究了 ...
- 查找存在某字符的文件列表，不包括svn文件
find . ! -wholename '*.svn*' -print | xargs grep "img" | awk -F ':.' '{print $1}' | uniq
- 使用Genymotion无法连接网络设置代理
A.) Genymotion 的 Proxy 设置 , 在Android的设置 -> 无线网络 -> Wi-Fi 之中 1.) 在 设置 -> 无线网络 -> Wi-Fi 里面 ...
- hdu(1114)——Piggy-Bank（全然背包）
唔..近期在练基础dp 这道题挺简单的(haha).可是我仅仅想说这里得注意一个细节. 首先题意: 有T组例子,然后给出储蓄罐的起始重量E,结束重量F(也就是当它里面存满了零钱的时候).然后给你一个数 ...
- oc44--多对象内存管理
// Room.h #import <Foundation/Foundation.h> @interface Room : NSObject @property int no;// 房间号 ...
- C#备份及还原数据库的实现代码（粗略） // 利用C#还原数据库（SQL SERVER）备份文件到指定路径
C#数据库备份及还原 1．在用户的配置时,我们需要列出当前局域网内所有的数据库服务器,并且要列出指定服务器的所有数据库,实现代码如下: 取得数据库服务器列表: public ArrayList Get ...
- hdfs du命令是算的一份数据
As you can see, hadoop fsck and hadoop fs -dus report the effective HDFS storage space used, i.e. th ...
- Codeforces--598A--Tricky Sum（数学）
Tricky Sum Tricky SumCrawling in process... Crawling failed Time Limit:1000MS Memory Limit:26 ...
- (Go)07.Go语言中strings和strconv包示例代码详解02
1.strings使用 统计字符串出现次数 strings.Count(s string, substr string) int Count 用于计算字符串 substr 在字符串 s 中出现的非重叠 ...