`

js日历，利用Json传递数据，并附上日期显示

JavaScript Json Jquery 
阅读更多

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" rev="stylesheet" href="../css/member.css" type="text/css" />
<style type="text/css">
*{margin:0;padding:0;font-size:12px;}
#div1{margin:20px;display:none;}
#div2{margin:20px;position:absolute; top:320px;}
#nowTime{width:285px;float:left;}
#nextTime{width:285px;float:left;margin:0 0 0 10px;}
.mytitle{width:100%;height:30px;background:#17a4eb;color:#FFFFFF;position:relative;}
.mytitle .c{text-align:center;line-height:30px;}
.mytitle .l{position:absolute;top:6px;left:5px;}
.mytitle .r{position:absolute;top:6px;right:5px;}
table.tcss{width:100%; background:#dee3e9;color:#9ea7ac;}
table.tcss tr{background:#f9fafc;}
table.tcss th{width:46px;padding:5px; font-size:11px;}
table.tcss td{padding:5px;text-align:center;}
.red{color:#ff0000;}
.myblue{color:#0000ff;
    background-color:#39F;
    }
.green{
    background-color:#6F0;
}
table .tcss td p{color:#FF0000;}

input{margin:20px;}

a{TEXT-DECORATION:none}
</style>
<script type="text/javascript" src="<%=basePath %>script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=basePath %>script/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){           
    var aInput = document.getElementsByTagName('input');
    var oDiv = document.getElementById('div1');
    var oNowTime = document.getElementById('nowTime');
    var oNextTime = document.getElementById('nextTime');   
   
    var aTd = document.getElementsByTagName('td');
   
//    alert(oTd.length);
    var aNowSpan = oNowTime.getElementsByTagName('span');
    var aNextSpan = oNextTime.getElementsByTagName('span');
   
//    var bBtn = true;
//    aInput[2].onclick=function(){
        var oDate = new Date();
//         if(bBtn){
            oDiv.style.display='block';
            if(oDate.getMonth()+1==12){
                showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
                showDate(oNextTime,oDate.getFullYear()+1,1);
            }else{
                showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
                showDate(oNextTime,oDate.getFullYear(),oDate.getMonth()+2);
            }
    //        alert(oDate.getDate());
            showColor(oDate.getDate());
            showBtn();
            hideLastTr();
            getJson('nowTime');
            getJson('nextTime');
/*        }else{
            oDiv.style.display='none';
        }
*/       
//        bBtn = !bBtn;
//    };
   
    function showDate(obj,year,month,bBtn){
        var oDate = new Date();
        var dayNum = 0;
       
        //没有Date则创建
        if(!obj.bBtn){
            obj.oTitle = document.createElement('div');
            obj.oTitle.className='mytitle';
            obj.appendChild(obj.oTitle);
           
            var oTable = document.createElement('table');
            $(oTable).addClass('tcss');
            var oThead = document.createElement('thead');
            var oTr = document.createElement('tr');
            var arr =['周一','周二','周三','周四','周五','周六','周日'];
            for(var i =0;i<7;i++){
                var oTh = document.createElement('th');   
                oTh.innerHTML = arr[i];
                if(i==5 || i==6){
                    oTh.className='red';   
                }
                oTr.appendChild(oTh);
            }
            oThead.appendChild(oTr);
            oTable.appendChild(oThead);
           
           
            var oTbody = document.createElement('tBody');
            for(var i = 0;i<6;i++){
                var oTr = document.createElement('tr');
                for(var j =0;j<7;j++){
                    var oTd = document.createElement('td');
                    oTr.appendChild(oTd);
                }
                oTbody.appendChild(oTr);
            }
            oTable.appendChild(oTbody);
            obj.appendChild(oTable);
            obj.bBtn = true;
        }
         
        obj.oTitle.innerHTML=(bBtn ? '<div class="l"><a href="javascript:void(0)"><<<span>'+(month-1)+'</span>月</a></div>'
                :'<div class="r"><a href="javascript:void(0)"><span>'+(month+1)+'</span>月>></a></div>')
                    +'<div class="c"><span>'+year+'</span>年<span>'+month+'</span>月 </div>';
       
        var aTd = obj.getElementsByTagName('td');
        //每次刷新先清空
        for(var i = 0;i<aTd.length;i++){
                aTd[i].innerHTML='';
               
        }
        //清楚所有样式
        /*
        for(var k =0;k<$('#nowTime td').size();k++){
         var bool = $('#nowTime td:eq('+k+')').hasClass('blue');
            if(bool){
                $('#nowTime td:eq('+k+')').uncorner();
            }
        }
        for(var k =0;k<$('#nextTime td').size();k++){
         var bool = $('#nextTime td:eq('+k+')').hasClass('blue');
            if(bool){
                $('#nextTime td:eq('+k+')').uncorner();
            }
        }
        */
        for(var k = 0;k<$('td').size();k++){
            $('td:eq('+k+')').uncorner();
            $('td:eq('+k+')').removeAttr('class');
        }
        if(month==1 || month==3 || month==5 || month==7 || month==8
           || month == 10 || month==12){
            dayNum = 31;   
        }
        else if(month==4 || month==6 || month==9 || month==11){
            dayNum=30;
        }else if(month==2 && isLeapYear(year)){
            dayNum = 29;   
        }else{
            dayNum = 28;   
        }
        oDate.setFullYear(year);
        oDate.setMonth(month-1);
        oDate.setDate(1);
       
        switch(oDate.getDay()){
            case 0:
                for(var i =0;i<dayNum;i++){
                    aTd[i+6].innerHTML = i+1;
                }
            break;
            case 1:
                for(var i =0;i<dayNum;i++){
                    aTd[i+1].innerHTML = i+1;
                }
            break;
            case 2:
                for(var i =0;i<dayNum;i++){
                    aTd[i+2].innerHTML = i+1;
                }
            break;
            case 3:
                for(var i =0;i<dayNum;i++){
                    aTd[i+3].innerHTML = i+1;
                }
            break;
            case 4:
                for(var i =0;i<dayNum;i++){
                    aTd[i+4].innerHTML = i+1;
                }
            break;
            case 5:
                for(var i =0;i<dayNum;i++){
                    aTd[i+5].innerHTML = i+1;
                }
            break;
            case 6:
                for(var i =0;i<dayNum;i++){
                    aTd[i+6].innerHTML = i+1;
                }
            break;
        }
        /*
        ajax('data.js?'+(+new Date),function(str){
            var j = eval('('+str+')');
            var now= 0;
            for(var i = 0;i<aTd.length;i++){
                if(aTd[i].innerHTML ==1){
                    now = i;   
                }
            }
           
            if(j.code){
                for(var i =0;i<j.list.length;i++){
                        if(j.list[i]){
                            var oP = document.createElement('p');
                            oP.innerHTML = j.list[i];
                            aTd[i+now].appendChild(oP);
                        }
                }
            }
        });
        */
        if(month==1 && bBtn ){
            obj.oTitle.getElementsByTagName('span')[0].innerHTML = 12;
        }else if(month==12 && !bBtn){
            obj.oTitle.getElementsByTagName('span')[0].innerHTML = 1;
        }
    }
    function  isLeapYear(year){
        if(year%4==0 && year%100!=0){
            return true;
        }else{
            if(year %400==0){
                return true;   
            }else{
                return false;
            }
        }   
    }
   
    function showColor(date){
            var result=[];
            var oDate = new Date();
    //        var re = new RegExp("'+date+'(<p>)*");
            var bBtn = true;
            var index = 0;
//            alert(oTd.length);
            for(var i = 0;i<aTd.length;i++){
                if(aTd[i].innerHTML !='')
                {
                    result.push(aTd[i]);   
                }
            }
            if(aNowSpan[1].innerHTML==oDate.getFullYear() &&
                        aNowSpan[2].innerHTML==oDate.getMonth()+1){
                for(var i = 0;i<result.length;i++){
    //                if(re.test(result[i].innerHTML)){
                    if(date==result[i].innerHTML && bBtn == true){
    //                    alert(result[i].innerHTML);
                    //    区别于其它签到日期，当前签到日期设置为green
                        result[i].className ='green';
                    //    $(result[i]).corner();   
                        index = i;   
                        bBtn = false;
                    }
                }
                //设置当前日期后10位蓝色字体显示
                /*
                for(len = index+10;index<len;index++){
                    result[index+1].className='blue';
                   
                }
                */
            }
           if(aNextSpan[1].innerHTML==oDate.getFullYear() &&
                        aNextSpan[2].innerHTML==oDate.getMonth()+1){
    //            for(var i = 0;i<result.length;i++){
                for(var i = result.length-1;i>=0;i--){
    //                if(re.test(result[i].innerHTML)){
                    if(date==result[i].innerHTML && bBtn == true){
    //                    alert(result[i].innerHTML);
                       
                        result[i].className ='green';   
                        index = i;
                    //只显示一次   
                        bBtn = false;
                    }
                }
                //设置当前日期后10位蓝色字体显示
                /*
                for(len = index+10;index<len;index++){
                    result[index+1].className='blue';
                   
                }
                */
            }
    }
    function showBtn(){
            var leftMonth = parseInt(aNowSpan[0].innerHTML);
            var leftYear = parseInt(aNowSpan[1].innerHTML);
            var rightMonth = parseInt(aNextSpan[0].innerHTML);
            var rightYear = parseInt(aNextSpan[1].innerHTML);
            aNowSpan[0].parentNode.onclick = function(){
                if(leftMonth == 12){
                    showDate(oNowTime,leftYear-1,leftMonth,true);
                    showDate(oNextTime,leftYear,1);
                }else{
                    showDate(oNowTime,leftYear,leftMonth,true);
                    showDate(oNextTime,leftYear,leftMonth+1);
                }
            //  设置按钮事件
                showBtn();
                showColor(new Date().getDate());
                hideLastTr();
                getJson('nowTime');
                getJson('nextTime');
            };
            aNextSpan[0].parentNode.onclick = function(){
                if(rightMonth == 1 ){
                    showDate(oNowTime,rightYear,12,true);
                    showDate(oNextTime,rightYear+1,rightMonth);
                }else{
                    showDate(oNowTime,rightYear,rightMonth-1,true);
                    showDate(oNextTime,rightYear,rightMonth);
                }
                showBtn();
                showColor(new Date().getDate());   
                hideLastTr();
                getJson('nowTime');
                getJson('nextTime');
            };
    }
           
    function hideLastTr(){
        var bBtn = true;
        var bBtn2 = true;
        for(var i = 35;i<42;i++){
            if( $('#div1 td:eq('+i+')').html() != ''){
                bBtn = false;   
            }
        }
        if(bBtn){
            for(var i = 35;i<42;i++){
                $('#div1 td:eq('+i+')').hide();
            }
        }
        else{
            for(var i = 35;i<42;i++){
                $('#div1 td:eq('+i+')').show();
            }
        }
       
        for(var i = 77;i<84;i++){
            if($('#div1 td:eq('+i+')').html() != ''){
                bBtn2 = false;   
            }
        }
        if(bBtn2){
            for(var i = 77;i<84;i++){
                $('#div1 td:eq('+i+')').hide();
            }
        }
        else{
            for(var i = 77;i<84;i++){
                $('#div1 td:eq('+i+')').show()    ;
            }
        }
    }
    function setDigital( num, n){
        var str = '' + num;
        while(str.length<n){
            str='0'+str;   
        }
        return str;
    }
   
    function getJson(position){
        $.getJSON("<%=basePath%>member/listMemberAttendance.htm",function(result){
            var records = result;
            for(var i=0;i<records.length;i++){
            //    alert(records[i]);
                var date = records[i];
                var yue = $('#'+position+' .c span:eq(1)').html();
                var month = setDigital(yue,2);
                var arr = date.split("-");
                var monthArr = arr[1];
                var dayArr = arr[2];
                if(month==monthArr){
                    var $td = $('#'+position+' td');
                    for(var k = 0;k<$td.size();k++){
                        var str = $td[k].innerHTML;
                        if(str==dayArr){
                    //        var $before = $('<a href="#">');
                    //        var $after = $('</a>');
                            $('#'+position+' td:eq('+k+')').addClass('myblue');
                            $('#'+position+' td:eq('+k+')').corner();
                        }
                    }
                }
            }
           
        });
    }           
});
</script>
</head>

<body >
<!--  <input type="text"/><input type="text"/><input type="button" value="确定"/>-->
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle">
        <div class="content">
            <div class="welcome">尊敬的${member.name }先生，下午好，欢迎来到XXX！<a class="blue" href="<%=basePath%>logOut.htm"><b>注销</b></a>  &nbsp;
                <a class="blue" href="<%=basePath%>member/saveMemberAttendance.htm"><b>我要签到</b></a>  &nbsp;   
                <a class="blue" href="<%=basePath%>index.htm"><b>返回首页</b></a>  </div>
            <div class="main">
                   
                <%@include file="left.jsp" %>
               
                <div class="right">
                    <div id="div1">
                        <div id = "nowTime"></div>
                        <div id = "nextTime"></div>
                    </div>
                    <div id="div2">
                       <p class="red">说明：<img src="/images/member/blueq.jpg" width="5%" height="5%"></img>已签到 &nbsp;&nbsp;
                           <img src="/images/member/greenq.jpg" width="5%" height="5%"></img>当日签到        &nbsp;&nbsp;
                           <img src="/images/member/greennq.jpg" width="5%" height="5%"></img>当前日期      &nbsp;&nbsp;
                       </p>
                </div>
                </div>
               
            </div>
        </div>
   </td>
 </tr>
</table>   
               

</body>
</html>

分享到：
| ajax onreadystatechange事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 日历 js日历 例子 javascript日历

    在实现JavaScript日历时，我们通常会利用JavaScript的Date对象来处理日期相关操作。例如，获取当前日期、切换月份、计算星期等。同时，通过监听用户的点击事件，我们可以实现日历的交互功能。比如，当用户点击某个...

    JS日历控件（可以选择多个日期）

    总结来说，创建一个JS日历控件并支持选择多个日期，需要对JavaScript的DOM操作、事件处理、日期对象有深入的理解，以及一定的前端设计和用户体验知识。实践中，我们可以结合现有的库和框架来简化开发流程，提高效率...

    Js双日历控件，同时显示两个日期选择器

    Js双日历控件，在一个网页上同时显示两个日期选择器，写成了封装类，方便使用者调用。同时美化的相当不错。 　包括了以下函数： 　1、2012——2020年节假日信息（包括节假日前1~3天/后1~3天） 　2、格式化数字，...

    周日历js插件，weeklyCalendar，只显示一周的日期

    本文将深入探讨一个专注于一周日期显示的JavaScript插件——weeklyCalendar。这款插件以其简洁的设计和丰富的功能，成为那些只需要关注一周时间范围的项目的理想选择。 1. **每周视图** weeklyCalendar的核心特性...

    js酒店价格日历_js门票价格日历_javascript价格日历

    详细请参考驴妈妈 酒店和门票的价格日历。 index.html 入口文件 data.php 包含一个价格日历生成类和 一些实例 product.php ajax产品的json格式 style 样式和js文件 说明： 此程序中js是驴妈妈上的,我做了些修改，...

    仿支付宝经营分析-周日历选择json（免费下载）

    总结来说，这个免费下载的资源提供了四年间的周日历数据，以JSON格式存储，包含了周次、开始日期和结束日期。对于开发者和数据分析师而言，它可以用于创建可视化报告、进行时间序列分析、优化业务决策，从而提升...

    js日历 12种js日历

    高质量的JavaScript日历组件通常提供API，允许开发者自定义样式、行为和功能，比如添加特定的日期标记、禁用某些日期、调整日历的显示样式等。 9. **性能优化** 考虑到性能，一个好的js日历组件应避免不必要的DOM...

    实用可拖动的日历js+css代码(选择日期用的)

    总结来说，这个“实用可拖动的日历js+css代码”是一个结合了JavaScript动态功能和CSS美化效果的日期选择工具，它提升了用户在网页上的日期操作体验，同时也展示了前端开发中JavaScript和CSS的巧妙运用。如果你正在...

    Kalendae.js日历控件可多选日期时间代码

    Kalendae.js是一款高效、灵活的JavaScript库，专为网页应用设计，用于创建交互式、可自定义的日历组件。它支持多种功能，如单选、多选日期以及时间选择，适用于各种场景，如事件预定、计划管理等。在网页开发中，...

    js日历代码,选择日期和时间代码

    本篇文章将详细讲解如何利用JavaScript实现一个简单的日历选择器，并涉及日期和时间处理的基本概念。 首先，让我们理解JavaScript中的日期对象（Date）。JavaScript内置的Date对象用于处理日期和时间，它可以用来...

    JS 日历组件（功能很强） javascript 日历控件 日历选择空间 日期选择 强烈推荐

    JavaScript日历组件是Web开发中常见的一种交互元素，主要用于用户在网页上进行日期选择操作。在前端开发领域，尤其在构建交互式用户界面时，一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...

    Js日历控件传递url参数

    "Js日历控件传递url参数"这个主题聚焦于如何将用户在日历控件中选择的日期作为URL参数传递到下一个页面，如博客日志列表或新闻列表页面，以便根据选定日期筛选内容。这里我们将深入探讨JavaScript（Js）与ASP技术...

    js日历控件日期多选Kalendajs

    在这个场景中，"js日历控件日期多选Kalendajs" 提供了一种功能强大的解决方案，允许用户在日历上选择多个日期，甚至可以跨越多个月份。 Kalendajs是一款专门设计的日历插件，它具有日期多选功能，可以极大地提升...

    JS日历控件(可选多个日期、很简单)

    在这个"JS日历控件"中，可能利用了事件监听（如click事件）来触发日历的显示和隐藏。 其次，对于多日期选择功能，控件可能采用了数组来存储用户选择的日期。用户每次选择一个日期，该日期就会被添加到数组中，同时...

    html js脚本日历控件

    创建日历控件首先需要在HTML中添加一个触发显示日历的按钮或者输入框，然后用JavaScript动态生成日历的HTML结构并插入到页面中。 2. **事件处理**：在JavaScript中，我们可以监听用户的点击、鼠标移动等事件，并...

    jquery实现的日历日程，日历显示日程条数，鼠标移入移出显示日程，ajax获取数据

    4. 数据处理：服务器响应后，解析返回的数据，通常是JSON格式，然后更新对应日期单元格的日程条数显示。 5. 显示日程详情：在mouseout事件中，可以清除或隐藏日程详情，保持日历的整洁。 6. 动画效果：为了提高...

    js带节假日日历控件

    "js带节假日日历控件"就是一种利用JavaScript实现的，包含节假日信息的日历组件。 创建这样的日历控件首先需要了解JavaScript的基本语法，包括变量声明、数据类型、条件语句、循环结构、函数等。同时，由于我们需要...

    JS日历插件日期选择器

    JavaScript（简称JS）日历插件是一种常用的前端交互组件，用于在网页上提供直观的日期选择功能。在网页设计和开发中，日期选择器通常用于处理与日期相关的表单输入，如预订系统、事件安排或者在线调查等。下面将详细...

    js日历排期，异步数据请求

    js日历排期，异步数据请求，js日期排期，日历排期。

Magicbox
Global site tag (gtag.js) - Google Analytics