您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > CSS > CSS3效果 > 正文

jQuery+CSS3绘制网页日历效果

2015-10-06 02:10:50 作者:天外飞仙 人气:106 Views

jQuery+CSS3绘制网页日历效果
20150927104642
引入js代码

<script type="text/javascript" src="js/jquery-1.7.min.js"></script><script type="text/javascript"> //日历—————————————————————————————————————————— $(function() { //绘制月历体—————————————————————————————————————————— for (var i = 0; i < 35; i++) { $("<li><span></span></li>").appendTo(".month-body").addClass("month-cell"); } var today = new Date() var FullYear = today.getFullYear(); //获取年份 var m = today.getMonth(); //获取月号 var month = today.getMonth() + 1; //获取月份 if (month < 10) { month = "0" + month; } var date = today.getDate(); //获取日期 var day = today.getDay(); //获取星期 var monthsNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var isleapyear = FullYear % 4; //判断闰年 if (isleapyear == 0) { monthsNum[1] = 29; } if (day == 0) { day = 7; } var firstDay = day - (date % 7 - 1); //!important 计算月初星期数 if (firstDay == 7) { //如果月初为七,归零 firstDay = 0; } if (firstDay < 0) { //如果月初为负,加七循环 firstDay += 7; } var f = firstDay; for (var j = 1; j <= monthsNum[m]; j++) { $("li.month-cell span").eq(f).text(j).parent().addClass("pink"); f++; } $("li.month-cell span").eq(firstDay - 1 + date).parent().addClass("red"); $(".month-head span").text(FullYear + "年" + month + "月"); })</script>

下载地址
预览地址

链接:http://www.jqueryba.com/5791.html(转载时请注明本文出处及文章链接)
分类:CSS3效果
标签:

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!