码迷,mamicode.com
首页 > Web开发 > 详细

jQuery获取本周的所有时间日期

时间:2016-05-09 15:42:34      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

效果图

技术分享

CSS代码

 ul,li,p{padding:0; margin:0; list-style:none; font-family:"微软雅黑"; font-size:14px;}
.div_week{width:900px; margin:20px auto;}
#ul_week{overflow:hidden; border-right:1px solid #EAEAEA; width:896px; }
#ul_week li p{display:block; }
#ul_week li a{color:#000; text-decoration:none; display:block; padding:10px 0}
#ul_week li{width:127px; float: left; border:1px solid #EAEAEA; border-right:0; text-align:center;  line-height:25px; }
#ul_time{overflow:hidden; border-right:1px solid #EAEAEA; width:896px; }
#ul_time li p{display:block; }
#ul_time li a{color:#000; text-decoration:none; display:block; padding:10px 0}
#ul_time li{width:63px; float: left; border:1px solid #EAEAEA; border-right:0; border-top:0; text-align:center;  line-height:25px; }
.li_bold { font-weight:bold;}

JS代码

 $(function () {
            //设置日期
            var list = "";
            for (var i = -3; i < 4; i++)
            {
                if (i == 0)
                    list += ‘<li class="li_bold" id="li_day‘+i+‘"><a href="time.aspx?date=‘ + GetDateStr(i) + ‘&day=‘+i+‘"><p>‘ + GetDateStr(i) + ‘</p><p>‘ + GetWeek(GetDateStr(i)) + ‘今天</p></a></li>‘;
                else
                    list += ‘<li id="li_day‘ + i + ‘"><a href="time.aspx?date=‘ + GetDateStr(i) + ‘&day=‘ + i + ‘"><p>‘ + GetDateStr(i) + ‘</p><p>‘ + GetWeek(GetDateStr(i)) + ‘</p></a></li>‘;
            }
            $("#ul_week").html(list);
            //地址获取参数
            var li_date = GetQueryString("date"); 
            var li_day = GetQueryString("day"); 
            var li_time = GetQueryString("time"); 
            //设置时间
            var myDate = new Date();
            var hovers = myDate.getHours();       //获取当前小时数(0-23)
            var list_time = "";
            for (var i = 8; i < 22; i++)
            {
                if (i == hovers)
                    list_time += ‘<li class="li_bold" id="li_time‘ + i + ‘"><a href="time.aspx?date=‘ + li_date + ‘&day=‘ + li_day + ‘&time=‘ + i + ‘"><p >‘ + i + ‘:00</p></a></li>‘;
                else 
                    list_time += ‘<li id="li_time‘ + i + ‘"><a href="time.aspx?date=‘ + li_date + ‘&day=‘ + li_day + ‘&time=‘ + i + ‘"><p>‘ + i + ‘:00</p></a></li>‘;              
            }
            $("#ul_time").html(list_time);
          //切换样式
            if (li_date != null)
            {
                $("#ul_week").find(‘li‘).removeClass(‘li_bold‘);
                $("#li_day" + li_day).addClass("li_bold");
            }
            if (li_time != null) {
                $("#ul_time").find(‘li‘).removeClass(‘li_bold‘);
                $("#li_time" + li_time).addClass("li_bold");
            }
        })
        function GetWeek(date) {
            var weekDay = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"];
            var week = new Date(date).getDay();
            return  weekDay[week];
        }
        function GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期 
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;//获取当前月份的日期 
            var d = dd.getDate();
            return y + "-" + m + "-" + d;
        }
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

Html代码

  <div class="div_week">
    <ul  id="ul_week"> </ul>
    <ul id="ul_time"></ul>
    </div>

  

  

  

jQuery获取本周的所有时间日期

标签:

原文地址:http://www.cnblogs.com/jingyong001/p/5474082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!