选择时间段控件

Question

1、确定可选时间刻度间隔，1分钟？还是10分钟？15分钟？根据需求来决定。
2、设计适当的html结构来展现时间线，例如用table/td，或ul/li等，每个末级子元素为一个时间刻度，固定宽度，用不同的样式标记无效的部分。
3、用另外一个绝对定位的标签来显示当前选择的时间，给它添加拖拽移动处理，以时间线上的末级子元素为drop目标，当drop时判断是否在有效时间范围内，无效则提示并取消移动。
4、如果时间刻度间隔较密，导致生成的html元素过多，可以换一种思路，连续的时间段只用一个html元素表示，设置它的宽度与时间段长度按比例对应，拖放时通过event对象中的鼠标位置属性来计算所选择的时间。

Answer 1

1楼说的很有道理，我打算用很多个button作为时间刻度，用一个特殊的button作为拖动按钮。时间刻度很紧密，每一分钟就是一个刻度，我这里需要480个button，我试试看会不会很卡。
“如果时间刻度间隔较密，导致生成的html元素过多，连续的时间段只用一个html元素表示”，不能这样吧，我如果想选中这连续的时间段里的某个时间，无法选中，只能选中这个连续的时间段。

Answer 2

想复杂了，原来拖都不用拖。一个div,
点一下，记下鼠标位置，记一个标志（1）。   做一个层。
再点一下，记下鼠标位置，比较2鼠标位置，      一样清除标志（0）清除层，   不一样，标志（1），复位，层加长度。记下2个鼠标位置数据。

Answer 3

这个方法好，可以在一个<hr>标签里面实现。那个层具体是Div还是别的？

Answer 4

我现在的页面是这样的：中间的选择时间用的是其他网站的控件，那个控件不能改变自己某段的颜色，这样不能直观的展示出哪段时间是有用的，哪段是无效的。
我自己想拿一个特殊背景颜色的Div套在某一段上，试了之后，实现不了。主要是自己搞的Div不能重合在时间线上，还有Div的位置不好控制。

Answer 5

选择时间段的功能实现了，感觉不够好，太局限了。大概说一下我的实现方法。
拖动的控件本来是一个进度条控件，用的dhtmlx的slider控件，初始化的代码：
        var slider = new dhtmlxSlider("sliderBox", {
            skin: "dhx_skyblue",
            min: BeginPointValue,//起点的分钟数，8:00 是480
            max: EndPointValue,//终点的分钟数，15:59 是959
            step: 1,
            size: EndPointValue - BeginPointValue
        });，
自己在slider下面建一个灰色背景的div，长度和slider一样。选择好时间，点击作为开始/结束时间把时间记录到下面的grid；根据所选时间段，动态生成一个橙色背景的div在灰色背景的div上（div的id用补全0的开始时间和结束时间如：0802_0954，设置id以后才好删除或者改变div的style）。选中一段时间在时间轴下面的用一个span（根据开始、结束时间确定位置）显示当前选中的开始、结束时间和备注，并把当前选中的时间段的DIV用特殊背景颜色标出。div的位置和长度根据开始、结束时间来确定；时间轴长度是开始时间分钟数-结束时间的分钟数，1px=1分钟，这里是759-480=479px，将时间和像素对应起来位置就好确定了：
var Div1 = document.createElement("div");
            Div1.setAttribute("style", "display:block; background-color: #66CC00; z-index:1; position: absolute; top:0px;right:0px;bottom:0px;left:" + (StartHour * 60 + StartMinute - BeginPointValue) + "px; height: 10px; width: " + (Endhour * 60 + Endminute - BeginPointValue - (StartHour * 60 + StartMinute - BeginPointValue)) + "px; float: left;");
下面是效果图：