jQuery-三班倒日历

说明

三班倒日历：相同的背景颜色代表相同的含义
举例：
2019年2月17日夜班-蓝色
2019年2月18日休息-粉红色
2019年2月19日白班-红色

1.效果图

2.html代码

仅供参考

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日历</title><style type="text/css">body{text-align: center;}div{margin: 0 auto;}table{border: solid 1px;}tr{border: solid 1px}td{border: solid 1px;padding: 5px;margin: 3px;}select{width: 100px}/* 蓝色粉色红色=休班夜班白班 */.night{background-color: LightPink}.white{background-color: OrangeRed}.rest{background-color: DeepSkyBlue}</style>
</head><body><div class="content"><table><thead><tr><th colspan="3"><select id="year" onchange="resetTable()"></select></th><th></th><th colspan="3"><select id="month" onchange="resetTable()"><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select></th></tr><tr><th>周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th></tr></thead><tbody id="tbody"></tbody></table></div><script src="js/jquery.min.js?v=2.1.4"></script><script type="text/javascript">$(function() {var currentDate = new Date();var currentYear = currentDate.getFullYear();var yearStr = '';for (var i = currentYear - 10; i < currentYear + 10; i++) {yearStr += '<option value="'+i+'" >'+i+'年</option>';}$("#year").html(yearStr).val(currentYear);$("#month").val(currentDate.getMonth() + 1);resetTable();});function getDaysInOneMonth(year, month){month = parseInt(month, 10);var d= new Date(year, month, 0);return d.getDate();}function resetTable() {var year = $("#year").val();var month = $("#month").val();//该年该月的天数var day = getDaysInOneMonth(year, month);console.log("year:"+year+" month:"+month+" day:"+day);var firstDayOfMonth = new Date(year, month-1, 1);//该月第一天是周几？0表示周日，1表示周一……6表示周六var dayWeek = firstDayOfMonth.getDay();console.log("dayWeek:"+dayWeek);var trStr = "";if (dayWeek == 0) {trStr = '<tr>'+'<td>1</td>'+'<td>2</td>'+'<td>3</td>'+'<td>4</td>'+'<td>5</td>'+'<td>6</td>'+'<td>7</td>'+'</tr>';}if (dayWeek == 1) {trStr = '<tr>'+'<td></td>'+'<td>1</td>'+'<td>2</td>'+'<td>3</td>'+'<td>4</td>'+'<td>5</td>'+'<td>6</td>'+'</tr>';}if (dayWeek == 2) {trStr = '<tr>'+'<td></td>'+'<td></td>'+'<td>1</td>'+'<td>2</td>'+'<td>3</td>'+'<td>4</td>'+'<td>5</td>'+'</tr>';}if (dayWeek == 3) {trStr = '<tr>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td>1</td>'+'<td>2</td>'+'<td>3</td>'+'<td>4</td>'+'</tr>';}if (dayWeek == 4) {trStr = '<tr>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td>1</td>'+'<td>2</td>'+'<td>3</td>'+'</tr>';}if (dayWeek == 5) {trStr = '<tr>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td>1</td>'+'<td>2</td>'+'</tr>';}if (dayWeek == 6) {trStr = '<tr>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td></td>'+'<td>1</td>'+'</tr>';}for (var i=(8-dayWeek); i<=day; i++) {trStr += '<tr>'+'<td>'+i+'</td>';if (i+1 <= day) {trStr += '<td>'+(i+1)+'</td>';    }if (i+2 <= day) {trStr += '<td>'+(i+2)+'</td>'; }if (i+3 <= day) {trStr += '<td>'+(i+3)+'</td>'; }if (i+4 <= day) {trStr += '<td>'+(i+4)+'</td>'; }if (i+5 <= day) {trStr += '<td>'+(i+5)+'</td>'; }if (i+6 <= day) {trStr += '<td>'+(i+6)+'</td>'; }trStr += '</tr>';i = i+6;}$("#tbody").html(trStr);//设置颜色setTdColor(year, month);}function setTdColor(year, month) {var time1 = Date.parse(new Date("2018-12-31"));var td;var tdText;var day;var time2;var nDays;$.each($("#tbody").find("tr td"), function() {td = $(this);day = td.html();if (day) {time2 = Date.parse(new Date(year, month-1, day));nDays = Math.abs(parseInt((time2 - time1)/1000/3600/24));console.log("nDays"+nDays);if (nDays % 3 == 0) {td.addClass("night");}if (nDays % 3 == 1) {td.addClass("white");}if (nDays % 3 == 2) {td.addClass("rest");}}});}</script>
</body>
</html>

jQuery-三班倒日历相关推荐

一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
日历签到 mysql_php+mysql+jquery实现日历签到功能的方法
本文主要介绍了php+mysql+jquery实现日历签到功能的过程与步骤,具有很好的参考价值在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到 ...
java 日历签到功能_基于jquery实现日历签到功能
使用Jquery实现每日签到功能基于jquery实现日历签到功能 jquery记事日历插件e-calendar 思路:1.获取当月第一天是周几2.获取当月共几天通过获取下月的第0天,即是当月最后一 ...
js php 实现日历签到_基于jquery实现日历签到功能_jquery
在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考 ...
每日签到html特效,jQuery实现日历每日签到网页特效
本文主要和大家分享jQuery实现日历每日签到网页特效,主要以代码的形式和大家分享,希望能帮助到大家. index.html 代码: jQuery简洁的日历签到插件 $(function(){ //a ...
jquery 简单日历
今天试着用jquery 写了一个日历,等有时间研究一下别人写的思路,上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
jquery网页日历显示控件calendar3.1使用详解
关于日历插件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件.我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历.Calendar ...
利用jQuery定制日历（含时分秒时区功能）
出于需要,最近想找一个含时分功能的日历,网上的确有些网友自己用js写的,但是下载下来问题诸多,加之代码说明混乱,所以改起来很麻烦.后来发现有国外网友利用Jquery定制了比较丰富的日历样式,最重要的是 ...
Bootstrap+Jquery的日历效果实现
一.效果图二.代码本案例中用到了Bootstrap和Jquery,除此之外还有其他的ls和css文件. dateTime.css如下: @charset "utf-8"; *{ ...
jquery表格日历写入html,jQuery简单实现日历的方法
本文实例讲述了jQuery简单实现日历的方法.分享给大家供大家参考.具体分析如下: 原理挺简单的,首先算出一个月有多少天,再算出这个月的第一天是星期几,接着顺序排下来就可以了. tryMyOwnCal ...

jQuery-三班倒日历

说明

1.效果图

2.html代码

jQuery-三班倒日历相关推荐

最新文章

热门文章