一个简单横向javascript日期控件_时间日期-js教程-PHP中文網

首頁

web前端

js教程

一个简单横向javascript日期控件_时间日期

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:07 PM

具体要求就是：
1、日期表格横向占满页面。
2、每个月的日期列表横向显示在一排，而不是像网上的很多日期控件显示一个方块。
3、要求只有年月日可选，选择年或月后自动更新对应日期（这个每个日期控件都有的）。
4、默认显示当前年月，高亮当前日期，并显示当前的周次（本年第几周）和星期几。
5、选择某个日期后高亮显示当前日期，并自动更新周次和星期显示。
6、提供接口，可以设定特定日期的显示样式。
6、其他就是一些界面展示的问题了。

想着就是一个日期控件，做着也比较简单，不过比较特别是横向的，第一次听说这种需求的！
偶还是第一次写日历类的东西，不过这次的麻烦还是在于周次的计算上和最后提供的设定特定日期的接口实现上，但经过一番分析也很好的解决了。
主要几个总结：
1、使用了闭包，隐藏内部函数及变量，防止变量污染。最后只提供一个对外接口：setDateStyle
2、计算每年二月的天数不是通过判断闰年的办法，而是通过判断是否2月29日存在，如果不存在则为28天。
3、计算周次要先计算当前日期是本年的第几天，同时要考虑本年1月1日是星期几，然后计算即可得出。
4、setDateStyle支持单个日期样式的传入，也支持多个日期样式的设定。对于样式的更新主要采用数组合并字符窜，并采用字符串的indexOf方法匹配并执行样式的设定。
5、CSS/JS/HTML相分离，便于维护。函数模块化便于重用。

复制代码代码如下:

var logDateControl=(function(){ 
  var curSelEl;  //当前选中的日期 
  var styleData=[],dataStyle={}; 
  //获取指定id的元素 
  var $=function(id){return document.getElementById(id)} 
  //计算指定日期是第几周（默认为当前日期），该计算方法比较严密准确 
  var calWeek=function(dt){ 
    var calDay=dt||new Date();  //当前要计算的时间 
    var firstDay=new Date(calDay.getFullYear(),0,1);  //本年第一天 
    //计算当前是本年的第几天,00：00为当天开始 
    var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;   
    //本年第一天星期几 
    var firstDayWeekday=firstDay.getDay();   
    //该结果加到第一周的周一，便于后面计算 
    var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;   
    daysAll=daysAll+diffDay; 
    return Math.ceil(daysAll/7);  //返回计算结果 
  } 
  //计算一个月多少天,年份4位数字，月份1-2位数字（应该是js日期格式如1月传入0）,数据非法返回-1 
  var getDaysLen=function(year,month){ 
    if(!(/^\d{4}$/.test(year)&&/^\d{1,2}$/.test(month))){return -1} 
    var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31] 
    //存在2月29日 
    if(month==1&&new Date(year,1,29).getMonth()==1){monthDays[1]=29} 
    return monthDays[month] 
  } 
  //显示日期列表,传入年、月(按日常月份传入。如二月传入2)、及显示位置 
  var displayDayList=function(year,month,pos){ 
    var daysList=[]; 
    var cells1=$(pos).rows[0].cells; 
    var cells2=$(pos).rows[1].cells; 
    var daysArr=['日','一','二','三','四','五','六']; 
    //下面的month-1转换为js月份表示 
    for(var i=1,l=getDaysLen(year,--month)+1;i      var wd=new Date(year,month,i).getDay(); 
      cells1[i-1].className=""; 
      if(wd==0||wd==6){cells1[i-1].className="weekEnd";}  //为周末添加特殊样式 
      //_oldCls保存当前日期的默认样式 
      cells1[i-1].innerText=daysArr[wd]; 
      cells2[i-1].className="unSelectDay"; 
      cells2[i-1].setAttribute("_oldCls","unSelectDay"); 
      cells2[i-1].innerText=i>9?i:"0"+i; 
      //匹配用户自定义样式 
      var dtStr=year+"|"+(month+1)+"|"+i; 
      if((","+styleData.join(',')+",").indexOf(","+dtStr+",")>-1){ 
        cells2[i-1].className="unSelectDay "+dataStyle[dtStr]; 
        cells2[i-1].setAttribute("_oldCls","unSelectDay "+dataStyle[dtStr]); 
      } 
    } 
    //如果是当前月则选中当日 
    if(new Date().getMonth()==month){ 
      curSelEl=cells2[new Date().getDate()-1]; 
      curSelEl.className="selectDay"; 
    } 
    for(var j=i-1;j      cells1[j].className=cells2[j].className=""; 
      cells1[j].innerHTML=cells2[j].innerHTML="  "; 
    } 
    $(pos).onclick=function(){changeInfo()} 
  } 
  //根据选择的值进行处理周次和周几的调整,可以直接传入保存日期内容的dom元素，或者函数根据点击位置判断 
  var changeInfo=function(e){ 
    e=e||event; 
    var el=e.target||e.srcElement||e;  //最后一个e：可能是传入的对象 
    var day=el.innerText; 
    if(!/^\d{1,2}$/.test(day)) return;  //如果不是日期什么都不做 
    //恢复之前选中日期的样式 
    if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")} 
    curSelEl=el;  //保存当前处理的元素 
    //更新选中日期的样式 
    el.className="selectDay"; 
    var dt=new Date($("year").value,$("month").value-1,day); 
    //更新信息 
    $("day").value=day;  //日期 
    $("weekday").value=['日','一','二','三','四','五','六'][dt.getDay()];  //星期几 
    $("week").value=calWeek(dt);  //第几周 
  } 
  //初始化 
  window.attachEvent("onload",function(){ 
    var curDate=new Date(),curYear=curDate.getFullYear(); 
    //显示上下十年 
    for(var i=-10;i    $("year").selectedIndex=10;  //默认选中当前年份 
    $("month").selectedIndex=curDate.getMonth();  //当前月份 
    $("day").value=curDate.getDate();  //当前日期 
    $("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];  //当前星期几 
    $("week").value=calWeek();  //当前第几周 
    //改变日期或年份更新日期列表 
    $("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList")}; 
    //显示当月日期列表,并高亮当天的日期 
    displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList"); 
  }); 

  //对外设定样式的接口。 
  //格式：([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f") 
  //如果月份小于10不要带0 
  var setDateStyle=function(dateArr,style){ 
    if(typeof dateArr!="object")return; 
    if(dateArr instanceof Array){ 
      if(dateArr[0] instanceof Array){ 
        for(var i=0;i      } 
      var dataStr=dateArr.join('|'); 
      styleData.push(dataStr); 
      dataStyle[dataStr]=style; 
      return; 
    } 
  } 
  //对外接口 
  return {setDateStyle:setDateStyle} 
})(); 
//测试样式设定 
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test"); 

<title> new document </title> 
  <meta name="generator" content="editplus"> 
  <meta name="author" content=""> 
  <meta name="keywords" content=""> 
  <meta name="description" content=""> 
 <style type="text/css"> 
    *{font-size:14px} 
    /*日期最外层*/ 
    #logCalendar{width:950px;border-top:1px solid #ccc;border-left:1px solid #ccc} 
    /*日期内部所有单元格*/ 
    #logCalendar td{ 
        border-right:1px solid #ccc;border-bottom:1px solid #ccc; 
        padding-left:5px;text-align:center; 
        height:22px;line-height:22px; 
    } 
    #daysList{border-top:1px solid #ccc;border-left:1px solid #ccc} 
    /*日期列表所有单元格*/ 
    #daysList td{text-align:center;height:22px}

/*周次及星期几的输入框*/ 
    .bd{border:0;text-align:center;color:#00f} 
    /*日期默认样式*/ 
    .unSelectDay{ 
        color:#00f;font-weight:normal; 
        padding:3px;cursor:pointer; 
        text-decoration:underline 
    } 
    /*当前点击的日期样式*/ 
    .selectDay{color:#fff;font-weight:bold;background:#FEB0B0;padding:1px;text-decoration:none;cursor:normal} 
    /*周末样式*/ 
    .weekEnd{color:#f00}

.test{color:#f00;text-decoration:none} 
 </style> 
 <script type="text/javascript"> 
 //2007-12-21 工作日志日期组件 yanwei 
 //使用闭包隐藏所有变量和函数，防止与外界冲突 
var logDateControl=(function(){ 
    var curSelEl;    //当前选中的日期 
    var styleData=[],dataStyle={}; 
    //获取指定id的元素 
    var $=function(id){return document.getElementById(id)} 
    //计算指定日期是第几周（默认为当前日期），该计算方法比较严密准确 
    var calWeek=function(dt){ 
        var calDay=dt||new Date();    //当前要计算的时间 
        var firstDay=new Date(calDay.getFullYear(),0,1);    //本年第一天 
        //计算当前是本年的第几天,00：00为当天开始 
        var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;     
        //本年第一天星期几 
        var firstDayWeekday=firstDay.getDay();     
        //该结果加到第一周的周一，便于后面计算 
        var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;     
        daysAll=daysAll+diffDay; 
        return Math.ceil(daysAll/7);    //返回计算结果 
    } 
    //计算一个月多少天,年份4位数字，月份1-2位数字（应该是js日期格式如1月传入0）,数据非法返回-1 
    var getDaysLen=function(year,month){ 
        if(!(/^\d{4}$/.test(year)&&/^\d{1,2}$/.test(month))){return -1} 
        var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31] 
        //存在2月29日 
        if(month==1&&new Date(year,1,29).getMonth()==1){monthDays[1]=29} 
        return monthDays[month] 
    } 
    //显示日期列表,传入年、月(按日常月份传入。如二月传入2)、及显示位置 
    var displayDayList=function(year,month,pos){ 
        var daysList=[]; 
        var cells1=$(pos).rows[0].cells; 
        var cells2=$(pos).rows[1].cells; 
        var daysArr=['日','一','二','三','四','五','六']; 
        //下面的month-1转换为js月份表示 
        for(var i=1,l=getDaysLen(year,--month)+1;i<l;i++){ 
            var wd=new Date(year,month,i).getDay(); 
            cells1[i-1].className=""; 
            if(wd==0||wd==6){cells1[i-1].className="weekEnd";}    //为周末添加特殊样式 
            //_oldCls保存当前日期的默认样式 
            cells1[i-1].innerText=daysArr[wd]; 
            cells2[i-1].className="unSelectDay"; 
            cells2[i-1].setAttribute("_oldCls","unSelectDay"); 
            cells2[i-1].innerText=i>9?i:"0"+i; 
            //匹配用户自定义样式 
            var dtStr=year+"|"+(month+1)+"|"+i; 
            if((","+styleData.join(',')+",").indexOf(","+dtStr+",")>-1){ 
                cells2[i-1].className="unSelectDay "+dataStyle[dtStr]; 
                cells2[i-1].setAttribute("_oldCls","unSelectDay "+dataStyle[dtStr]); 
            } 
        } 
        //如果是当前月则选中当日 
        if(new Date().getMonth()==month){ 
            curSelEl=cells2[new Date().getDate()-1]; 
            curSelEl.className="selectDay"; 
        } 
        for(var j=i-1;j<31;j++){ 
            cells1[j].className=cells2[j].className=""; 
            cells1[j].innerHTML=cells2[j].innerHTML="  "; 
        } 
        $(pos).onclick=function(){changeInfo()} 
    } 
    //根据选择的值进行处理周次和周几的调整,可以直接传入保存日期内容的dom元素，或者函数根据点击位置判断 
    var changeInfo=function(e){ 
        e=e||event; 
        var el=e.target||e.srcElement||e;    //最后一个e：可能是传入的对象 
        var day=el.innerText; 
        if(!/^\d{1,2}$/.test(day)) return;    //如果不是日期什么都不做 
        //恢复之前选中日期的样式 
        if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")} 
        curSelEl=el;    //保存当前处理的元素 
        //更新选中日期的样式 
        el.className="selectDay"; 
        var dt=new Date($("year").value,$("month").value-1,day); 
        //更新信息 
        $("day").value=day;    //日期 
        $("weekday").value=['日','一','二','三','四','五','六'][dt.getDay()];    //星期几 
        $("week").value=calWeek(dt);    //第几周 
    } 
    //初始化 
    window.attachEvent("onload",function(){ 
        var curDate=new Date(),curYear=curDate.getFullYear(); 
        //显示上下十年 
        for(var i=-10;i<10;i++){$("year").add(new Option(curYear+i,curYear+i))} 
        $("year").selectedIndex=10;    //默认选中当前年份 
        $("month").selectedIndex=curDate.getMonth();    //当前月份 
        $("day").value=curDate.getDate();    //当前日期 
        $("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];    //当前星期几 
        $("week").value=calWeek();    //当前第几周 
        //改变日期或年份更新日期列表 
        $("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList")}; 
        //显示当月日期列表,并高亮当天的日期 
        displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList"); 
    }); 
     
    //对外设定样式的接口。 
    //格式：([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f") 
    //如果月份小于10不要带0 
    var setDateStyle=function(dateArr,style){ 
        if(typeof dateArr!="object")return; 
        if(dateArr instanceof Array){ 
            if(dateArr[0] instanceof Array){ 
                for(var i=0;i<dateArr.length;i++) setDateStyle(dateArr[i],style); 
            } 
            var dataStr=dateArr.join('|'); 
            styleData.push(dataStr); 
            dataStyle[dataStr]=style; 
            return; 
        } 
    } 
    //对外接口 
    return {setDateStyle:setDateStyle} 
})(); 
//测试样式设定 
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test"); 
 </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。