一个时间线的js实现

  1. // timeline_xx.js
[javascript] view plaincopy
  1. //时间线,参数时间格式为yyyy-MM-dd
  2. var Timeline = function(id,from,to){
  3.     this.outId= id;
  4.     this.start = strToDate(from);
  5.     this.end = strToDate(to);
  6.     this.section = 10;//时间线上显示多少天
  7.     this.currentDate = this.start ;//时间线上的第一个时间是多少
  8.     this.line = [];//显示的具体时间
  9.     this.pre ;//往后翻
  10.     this.next;//往前翻
  11.     this.selectDay=”” ; //选择的日期
  12.     this.init = function(){
  13.         this.initLine();
  14.         var container = this.createContainer();
  15.         container.appendChild(this.createPre());
  16.         container.appendChild(this.createLine());
  17.         container.appendChild(this.createNext());
  18.         document.getElementById(id).appendChild(container);
  19.         this.render();
  20.     };
  21.     this.init();
  22. };
  23. Timeline.prototype={
  24.     //填充line
  25.     initLine : function(){
  26.         var distance = compareDate(this.currentDate,this.end);
  27.         if(distance ==0){
  28.             return;
  29.         }
  30.         this.line = [];
  31.         var nowSection = this.section;
  32.         if(distance<this.section){
  33.             nowSection = distance+1;
  34.         }
  35.         for(var i=0;i<nowSection;i++){
  36.             var now = addDate(this.currentDate,i);
  37.             this.line[i] = dateToStr(now);
  38.         }
  39.     },
  40.     createContainer : function(){
  41.         var that = this;
  42.         var container = document.createElement(“div”);
  43.         container.id = “timeline_container_div”;
  44.         container.className = “timeline”;
  45.         //点击时间线外部容器其它地方时,取消时间的选择
  46.         /**
  47.         $(“#”+that.outId).parent().click(function(){
  48.             var tags = getElementsByClassName(“clickLight”);
  49.             that.selectDay = “”;
  50.             if(tags.length>0){
  51.                 if(typeof(dayClickCallback)==”function”){
  52.                     dayClickCallback(“”);
  53.                 }
  54.             }
  55.             for(var i=0;i<tags.length;i++){
  56.                 tags[i].className = “liClass”;
  57.             }
  58.         });
  59.         $(container).click(function(e){
  60.             e.stopPropagation();
  61.         });
  62.         **/
  63.         return container;
  64.     },
  65.     //创建后翻元素
  66.     createPre : function(){
  67.         var preDiv = document.createElement(“div”);
  68.         preDiv.className = “preClass_div”;
  69.         var span = document.createElement(“span”);
  70.         span.innerHTML = “<img src=’pic/tl_left.png’>”;
  71.         span.className = “spanClass”;
  72.         var that = this;
  73.         span.onclick = function(){
  74.             var preDate =that.getCurrentDate(addDate(that.currentDate,-that.section));
  75.             if(compareDate(preDate, that.currentDate)==0){
  76.                 return ;
  77.             }
  78.             that.currentDate = preDate;
  79.             that.initLine();
  80.             that.render();
  81.             if(typeof(btnClickCallback)==”function”){
  82.                 btnClickCallback(-1);
  83.             }
  84.         };
  85.         preDiv.appendChild(span);
  86.         return preDiv;
  87.     },
  88.     //创建前翻元素
  89.     createNext : function(){
  90.         var nextDiv = document.createElement(“div”);
  91.         nextDiv.className = “nextClass_div”;
  92.         var span = document.createElement(“span”);
  93.         span.innerHTML = “<img src=’pic/tl_right.png’>”;
  94.         span.className = “spanClass”;
  95.         var that = this;
  96.         span.onclick = function(){
  97.             var nextDate =that.getCurrentDate(addDate(that.currentDate,that.section));
  98.             if(compareDate(nextDate,that.end)==0){
  99.                 return ;
  100.             }
  101.             that.currentDate = nextDate;
  102.             that.initLine();
  103.             that.render();
  104.             if(typeof(btnClickCallback)==”function”){
  105.                 btnClickCallback(1);
  106.             }
  107.         };
  108.         nextDiv.appendChild(span);
  109.         return nextDiv;
  110.     },
  111.     //防止当前日期超出选择的时间段,这时候要取临界值
  112.     getCurrentDate : function(currentDate){
  113.         if(currentDate.getTime()>this.end.getTime()){
  114.             return this.end;
  115.         }else if(currentDate.getTime()<this.start.getTime()){
  116.             return this.start;
  117.         }else{
  118.             return currentDate;
  119.         }
  120.     },
  121.     //创建时间线
  122.     createLine : function(){
  123.         var lineDiv = document.createElement(“div”);
  124.         lineDiv.id = “timeline_div”;
  125.         lineDiv.className = “timeline_bottom”;
  126.         return lineDiv;
  127.     },
  128.     getLine : function(){
  129.         return document.getElementById(“timeline_div”);
  130.     },
  131.     //显示
  132.     render : function(){
  133.         var that = this;
  134.         var line = this.getLine();
  135.         line.innerHTML = “”;
  136.         var ul = document.createElement(“ul”);
  137.         for(index in that.line){
  138.             var li = document.createElement(“li”);
  139.             var lidiv = document.createElement(“div”);
  140.             lidiv.className=”liClass”;
  141.             lidiv.onclick = function(){
  142.                 var tags = getElementsByClassName(“clickLight”);
  143.                 for(var i=0;i<tags.length;i++){
  144.                     if(tags[i] !=this){
  145.                         tags[i].className = “liClass”;
  146.                     }
  147.                 }
  148.                 if(this.className == “clickLight”){
  149.                     this.className = “liClass”;
  150.                     that.selectDay = “”;
  151.                 }else{
  152.                     this.className = “clickLight”;
  153.                     that.selectDay = this.innerHTML;
  154.                 }
  155.                 if(typeof(dayClickCallback)==”function”){
  156.                     dayClickCallback(this.innerHTML);
  157.                 }
  158.             };
  159.             lidiv.innerHTML = that.line[index];
  160.             li.appendChild(lidiv);
  161.             ul.appendChild(li);
  162.         }
  163.         line.appendChild(ul);
  164.     }
  165. };
  166. //只适合yyyy-MM-dd格式
  167. var strToDate = function(str)
  168. {
  169.   var arys= new Array();
  170.   arys=str.split(‘-‘);
  171.   var newDate=new Date(arys[0],arys[1]-1,arys[2]);
  172.   return newDate;
  173. };
  174. var dateToStr = function(date){
  175.     var year = date.getFullYear();
  176.     var month = date.getMonth()+1;
  177.     var day = date.getDate();
  178.     if((month+””).length<2){
  179.         month = “0”+month;
  180.     }
  181.     if((day+””).length<2){
  182.         day = “0”+day;
  183.     }
  184.     return year+”-“+month+”-“+day;
  185. };
  186. //在date这个日期的基础上加减day天,正负表示加减
  187. var addDate = function(date,day){
  188.     var millons = date.getTime();
  189.     millons = millons + day*24*60*60*1000;
  190.     return new Date(millons);
  191. };
  192. //两个日期之间相差多少天
  193. var compareDate = function (date1,date2){
  194.     var d1 = date1.getTime();
  195.     var d2 = date2.getTime();
  196.     return Math.abs(d1-d2)/24/60/60/1000;
  197. };
  198. //获得相同className的元素
  199. var getElementsByClassName = function(className){
  200.     var el = [];
  201.     var _el = document.getElementsByTagName(“*”);
  202.     for(var i=0;i<_el.length;i++){
  203.         if(_el[i].className == className){
  204.             el[el.length] = _el[i];
  205.         }
  206.     }
  207.     return el;
  208. };
[javascript] view plaincopy
[javascript] view plaincopy
  1. //timeline_xx.css
[javascript] view plaincopy
  1. <pre name=”code” class=”css”>.preClass_div{
  2.     float:left;
  3.     cursor: pointer;
  4. }
  5. .nextClass_div{
  6.     cursor: pointer;
  7.     right:0;
  8.     position:relative;
  9.     vertical-align:top;
  10.     float: right;
  11. }
  12. .spanClass{
  13. }
  14. .spanClassR{
  15. }
  16. .clickLight{
  17.     background:url(pic/click_bj.png) repeat-x left top;
  18.     padding:0 10px;
  19.     color:#fff;
  20.     font-weight:bold;
  21.     height:30px;
  22. }
  23. .liClass{
  24.     cursor:pointer;
  25. }
  26. .timeline {
  27.     padding: 0px;
  28.     margin: 0px;
  29.     overflow: hidden;
  30.     color: #5a5a5a;
  31.     font-size: 8pt;
  32.     background:url(pic/timeline_bj.png) repeat-x left top;
  33.     height:40px;
  34. }
  35. .timeline_bottom {
  36.     display: block;
  37. }
  38. .timeline_bottom ul {
  39.     list-style: none;
  40.     margin: 0px;
  41.     padding: 0px;
  42. }
  43. .timeline_bottom li {
  44.     float: left;
  45.     margin-right: 2px;
  46.     padding: 0px 2px 0px 10px;
  47.     width:70px;
  48.     _line-height:20px;
  49.     line-height:22px !important;
  50. }
  51. .timeline_bottom li {
  52. }
  53. .timeline_bottom li div {
  54.     text-transform: uppercase;
  55.     text-align: center;
  56.     width: 90px;
  57. }
  58. .timeline_bottom div {
  59.     padding: 5px 0px 3px 0px !important;
  60. }
  61. </pre><br>
  62. <br>
  63. <pre></pre>
  64. <pre name=”code” class=”javascript”>//timeline_xx.html<pre name=”code” class=”html”><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  65. <!– saved from url=(0046)http://3.s3.envato.com/files/143268/index.html –>
  66. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”><head><meta http-equiv=”Content-Type” content=”text/html; charset=GBK”>
  67.         <title>DENON STUDIO – Timeline</title>
  68.         <link href=”timeline_xx.css” type=”text/css” rel=”stylesheet”>
  69.         <script type=”text/javascript” src=”timeline_xx.js”></script>
  70.     </head>
  71.     <body>
  72.     <div id=”outer”>
  73.         <div id=”lineContainer”  style=”width: 1000px;text-align: center;”>
  74.     </div>
  75. </body>
  76. </html>
  77.  <script type=”text/javascript”>
  78.         var timeline = new Timeline(“lineContainer”,”2009-02-11″,”2012-05-22″);
  79.         function dayClickCallback(){
  80.             alert(“click a day to fire this”);
  81.         }
  82.         function btnClickCallback(value){
  83.             alert(“click right or left to fire this”);
  84.         }
  85.         </script></pre><br>
  86. <pre></pre>
  87. <pre></pre>
  88. <pre></pre>
  89. </pre>

标签