模拟时间滚动条
思路：通过div模拟时间滚动条
结构图
结构如下图所示（利用CSS样式表来调整样式）：
结果如下：
通过滑动滑块，改变当前值。利用JavaScript获得滑块在滑动轴上的当前位置，并返回给当前显示值。另：滑块只能在给定范围内滑动。
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间滚动条</title>
<link rel="stylesheet" href="css/TimeBar.css">
<script type="text/javascript" src="js/jquery2.1.4.js"></script>
</head>
<body style="background-color: papayawhip;">
<div id="TimeBar" class="TimeBarClass">
<div class="TimePClass">
<p>时间：</p>
</div>
<div class="TimeBarContentClass">
<div class="TimeSliderClass">
<div id="TimeMove" class="TimeMoveClass"></div>
</div>
<div class="StartTimeClass">
<p id="StartTimeBar">0</p>
</div>
<div class="CurTimeClass">
<p id="CurTimeBar">0</p>
</div>
<div class="EndTimeClass">
<p id="EndTimeBar">600</p>
</div>
</div>
</div>
<script type="text/javascript" src="js/TimeBar.js"></script>
</body>
</html>
JavaScript代码如下:
/**
* Created by zhangxiaoshuang on 2016/9/8.
*/
$(document).ready(function() {
var $StartTimeBar=$("#StartTimeBar");
var $CurTimeBar=$("#CurTimeBar");
var $EndTimeBar=$("#EndTimeBar");
//进度条
var moveWindSpeed = false;//移动标记
var _xTimeMove;//鼠标离控件左上角的相对位置
var $TimeMove = $("#TimeMove");
$TimeMove.mousedown(function (e) {
moveWindSpeed = true;
_xTimeMove = e.pageX - parseInt($TimeMove.css("left"));
});
$(document).mousemove(function (e) {
var x = e.pageX - _xTimeMove;//控件左上角到屏幕左上角的相对位置
if (moveWindSpeed) {
if (x <=600 && x >= 0) {
$TimeMove.css({"left": x});
//转换为给定值的当前值
var s=Number($StartTimeBar.text());
var e=Number($EndTimeBar.text());
var n=e-s+1;
var PerTime=600/n;
var Min;
var Max;
for(var i=0;i<n;i++)
{
Min=i*PerTime;
Max=(i+1)*PerTime;
if((x>=Min && x<Max))
{
$CurTimeBar.text(s+i);
}
else if(x==600)
{
$CurTimeBar.text(e);
}
}
}
}
}).mouseup(function () {
moveWindSpeed = false;
});
//初始化函数 s,e分别为开始变量和结束变量
function InitTimeBar(s,e)
{
//更新数据
$StartTimeBar.text(s);
$CurTimeBar.text(s);
$EndTimeBar.text(e);
$TimeMove.css("left","0");
}
//调用一次，进度条走一格，且数据被更新
function NextTimeBar()
{
//获取当前Left
var CurLeft=$TimeMove.position().left;
//获取当前范围
var s=Number($StartTimeBar.text());
var e=Number($EndTimeBar.text());
//获取间隔
var n=e-s+1;
var PerTime=600/n;
var Min;
var Max;
var Ret;
for(var i=0;i<n;i++)
{
Min=i*PerTime;
Max=(i+1)*PerTime;
if((CurLeft>=Min && CurLeft<Max))
{
Ret=i;
}
else if(CurLeft==600)
{
Ret=n-1;
}
}
if(Ret==n-1)
{
return;
}
else
{
Ret++;
var temp=Number($CurTimeBar.text());
temp++;
$CurTimeBar.text(temp);
$TimeMove.css({"left": CurLeft+PerTime});
}
}
//InitTimeBar(0,4);
//NextTimeBar();
});
