你的位置:首页 > 网页设计

[网页设计]MUI开发记录——我的考勤

已经好久没有更新技术博客了,因为最近一直在做跨平台web app应用的开发,由于是刚做这个,也没太多经验同大家分享,可我是一个闲不住的人,我还是决定于百忙之中抽空整理一篇,记录下开发历程......——前言

需求描述

可以选择日期,按月份分别查看应出勤数、已出勤数、迟到数、早退数,用特殊标记标出某天是迟到还是早退等等,选中某天,直接加载该天的所有考勤记录,看上去挺简单的功能,要我写js估计可以写到吐血,还好懂得拿来主义,网上找个开源的日历组件,然后进行改造。日历组件源码地址Calendar.js由于公司没有平面和美工,也没有前端,所以这些活我就兼做了,所以大家不要对界面吐槽,我已经尽力了,555~,下面的界面截图我都是用的谷歌浏览器,模拟iphone6的效果,同真机上比自然会有一定的出入,通常来说真机上面要比模拟器上面更漂亮和清晰,界面效果如下:

注:橙色表示当前日期,浅蓝色表示选中日期,默认情况下显示当前日期,并加载当天的考勤记录。

功能实现

之前本来打算使用区域滚动的,后面看见原型界面是整个页面滚动,所以我就暂时注释了这块。

日历支持左右滑动进行翻页(按月进行翻),顶部按钮也支持翻页。

技术选型:mui、h5、h5+、vue.js

html代码如下:

<!doctype html><html><head> <meta charset="UTF-8"> <title>我的考勤</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../../css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="../../css/base.css" /> <link rel="stylesheet" href="../../css/app/home/timeline.css" /> <link rel="stylesheet" href="../../css/app/my/punch-card.css" /> <link rel="stylesheet" href="../../css/calendar.css" /></head><body> <header class="mui-bar mui-bar-nav">  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  <h1 class="mui-title">我的考勤</h1><span id="bigTime" class="bigTime" style="visibility:hidden;"></span> </header> <div id="app" class="mui-content">  <div class="div-yearmonth">   <i id="prePage" class="mui-icon iconfont icon-shangyiye"></i>   <span class="spn-today"><i class="mui-icon iconfont icon-rili"></i><span id="timeNow"></span></span>   <i id="nextPage" class="mui-icon iconfont icon-xiayiye"></i>  </div>  <div class="div-operate">   <div class="mui-segmented-control ul-operate">    <a class="mui-control-item mui-active" v-on:tap="getDataByType(1)">     <p><span v-text="obj.attendance"></span>天</p>     <p>应出勤</p>    </a>    <a class="mui-control-item" v-on:tap="getDataByType(2)">     <p><span v-text="obj.actualAttendance"></span>天</p>     <p>实际出勤</p>    </a>    <a class="mui-control-item" v-on:tap="getDataByType(3)">     <p><span v-text="obj.beLate"></span>次</p>     <p>迟到</p>    </a>    <a class="mui-control-item" v-on:tap="getDataByType(4)">     <p><span v-text="obj.leaveEarly"></span>次</p>     <p>早退</p>    </a>   </div>  </div>  <div id="container"></div>  <div class="div-list">   <div class="line"></div>   <div class="date"><span class="spn-date"><i v-text="monthDay" class="monthDay"></i><i v-text="week">星期一</i></span></div>   <!--<div id="mui-scroll-wrapper" >    <div >-->     <!--这里放置真实显示的DOM内容-->     <section v-if="list.length>0" id="cd-timeline" class="cd-container">      <div v-for="(item,index) in list" class="cd-timeline-block">       <div class="cd-timeline-img cd-picture" v-bind:class="{first:!index}"><span class="worktag">早班上班</span></div>       <div class="cd-timeline-content">        <div class="timeline-head">         <span class="fl" v-text="item.name"></span>         <span class="fl">打卡时间</span><span class="fl" v-text="item.time"></span>         <span v-if="item.errorType!=''" class="mui-badge fl" v-bind:class="g.getTimeCardTypeBcByVal(item.errorType)" v-text="g.getTimeCardTypeByVal(item.errorType)"></span>        </div>        <div class="div-address"><i class="mui-icon mui-icon-location"></i><span v-text="item.address"></span></div>       </div>      </div>     </section>     <div v-else>      <div class="emptyinfo">       <span class="mui-icon mui-icon-location"></span>       <p>您今天未打卡哦~</p>      </div>     </div>    <!--</div>   </div>-->  </div> </div> <script src="../../js/mui.min.js"></script> <script type="text/javascript" src="../../js/libs/vue.min.js"></script> <script type="text/javascript" src="../../js/common/config.js"></script> <script type="text/javascript" src="../../js/common/global.js"></script> <script type="text/javascript" src="../../js/libs/calendar.js"></script> <script type="text/javascript">  var canlendar = null;  mui.init();  mui.ready(function () {   //g.initScroll({ h: '300px' });//区域滚动  });  var app = new Vue({   el: "#app",   data: {    obj: {     attendance: '',     actualAttendance: '',     beLate: '',     leaveEarly: ''    },    appData: {     attendance: [],     actualAttendance: [],     beLate: [],     leaveEarly: []    }, //不同考勤类型数据    monthDay: g.getDatePart('month') + '/' + g.getDatePart('day'), //月/日    week: g.getDatePart('week'), //星期几    list: []   },   mounted: function () {    var _self = this;    eventListener();    initHandleData(_self); //1    canlendar = new Calendar({     parentNode: document.getElementById("container"),     appData: _self.appData,     sltDateFuc:_self.sltDateFuc    }); //2注意顺序    mui.plusReady(function () {     var wv = plus.webview.currentWebview();     _self.userName = wv.userName;     _self.roleName = wv.roleName;     _self.imgUrl = wv.imgUrl;    })   },   methods: {    //回调函数,根据日期获取考勤记录    sltDateFuc: function (date) {     //test     console.log(date);     var sltDate = g.convertDateFromString(date);     this.monthDay = g.getDatePart('month', sltDate) + '/' + g.getDatePart('day', sltDate); //月/日     this.week = g.getDatePart('week', sltDate); //星期几     if (date == '2017-11-11') {      this.list = [{       name: '早班上班',       address: '广东省深圳市南山区学苑大道1001号南山智园C3栋5楼',       time: '08:20',       tag: 1,       errorType: '1'      },     {      name: '早班上班',      address: '广东省深圳市南山区学苑大道1001号南山智园C3栋5楼',      time: '09:20',      tag: 1,      errorType: '2'     },     {      name: '中班上班',      address: '广东省深圳市南山区学苑大道1001号南山智园C3栋5楼',      time: '12:20',      tag: 1,      errorType: ''     }      ];     } else if (date == '2017-11-10') {      this.list = [{       name: '晚班上班',       address: '广东省深圳市南山区学苑大道1001号南山智园C3栋5楼',       time: '21:20',       tag: 1,       errorType: '1'      },     {      name: '晚班上班',      address: '广东省深圳市南山区学苑大道1001号南山智园C3栋5楼',      time: '22:20',      tag: 1,      errorType: '2'     },     {      name: '晚班上班',      address: '广东省深圳市南山区学苑大道1001号南山智园C3栋5楼',      time: '23:20',      tag: 1,      errorType: ''     }      ];     } else {      this.list = [];     }    },    //切换考勤类型    getDataByType: function (t) {     var result = [];     switch (t) {      case 1: //应出勤       app.appData.attendance = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 25, 27];       app.appData.beLate = [];       app.appData.leaveEarly = [];       app.appData.actualAttendance = [];       break;      case 2: //实际出勤       app.appData.actualAttendance = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 25, 27];       app.appData.attendance = [];       app.appData.leaveEarly = [];       app.appData.beLate = [];       break;      case 3: //迟到       app.appData.beLate = [3, 5];       app.appData.actualAttendance = [];       app.appData.attendance = [];       app.appData.leaveEarly = [];       break;      default: //早退       app.appData.leaveEarly = [11, 7, 21];       app.appData.attendance = [];       app.appData.actualAttendance = [];       app.appData.beLate = [];       break;     }     app.list = result;     canlendar = new Calendar({      parentNode: document.getElementById("container"),      appData: app.appData,      sltDateFuc: app.sltDateFuc     });    }   }  });  function eventListener() {   //上月   document.getElementById('prePage').addEventListener('tap', function () {    console.log('prePage')    canlendar.turnPre();    var str = canlendar.getPreMonth(g.id("bigTime").innerHTML);    updateMonth(str);   })   //下月   document.getElementById('nextPage').addEventListener('tap', function () {    canlendar.turnNext();    var str = canlendar.getNextMonth(g.id("bigTime").innerHTML);    updateMonth(str);   })  }  function updateMonth(str) {   var year = str.substring(0, 4);   var month = str.substr(5, 2);   var r = year + '年' + month + '月';   g.id("bigTime").innerHTML = str;   g.id("timeNow").innerHTML = r;  }  function initHandleData(app) {   app.obj.attendance = 27;   app.obj.actualAttendance = 26;   app.obj.beLate = 2;   app.obj.leaveEarly = 3;  } </script></body></html>
View Code

数据我都是模拟的假数据,所以看见显示有问题不要奇怪,实际项目自然是用ajax调用api接口进行数据填充。咋一看就知道这里面用到了日期和垂直时间线。

calendar.js我是在别人的calendar组件基础之上进行修改的,代码如下:

/** * Created by zouqj on 17/11/10 */var doc = window.document;var Calendar = function (options) { "use strict"; //默认参数 var defaults = {  //中文格式内容  appData: { attendance: [], actualAttendance: [], beLate: [], leaveEarly: [] },//界面传过来的数据  sltDateFuc: function (sltDate) { },//选中日期回调函数  monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],  dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],  dayLongNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],  holiday: {   "1-1": "元旦",   "2-2": "湿地日",   "2-14": "情人节",   "3-8": "妇女节",   "3-12": "植树节",   "3-15": "消费者权益日",   "4-1": "愚人节",   "4-22": "地球日",   "5-1": "劳动节",   "5-4": "青年节",   "5-12": "护士节",   "5-18": "博物馆日",   "6-1": "儿童节",   "6-5": "环境日",   "6-23": "奥林匹克日",   "6-24": "骨质疏松日",   "7-1": "建党节",   "8-1": "建军节",   "9-3": "抗战胜利日",   "9-10": "教师节",   "10-1": "国庆节",   "11-17": "学生日",   "12-1": "艾滋病日",   "12-24": "平安夜",   "12-25": "圣诞节"  },  firstDay: 1,    // 从周一开始,计算  weekendDays: [0, 6],  // 休息日为:周六, 周日  dateFormat: 'yyyy-mm-dd', // 打印格式, formatDate 对应  limitDis: 80,    // 拖拽限制距离,当大于该距离时,触发页面切换  weekHandler: "dayThead", // 星期title内容所在类  monthContainer: "dateUl", // 日期内容所在容器类  toolBar: "timeChoose",  // 工具条所在类  parentNode: document.body, // 组件插入容器,默认body  template: // '<div id="timePannel"></div>'          //+ '<div >'     //+  '<header ></header>'     //+  '<div >'     //+   '<div ></div>'     //+   '<div ></div>'     //+   '<div >'     //+    '<div ></div>'     //+    '<div ></div>'       //+   '</div>'     //+  '</div>'     //+ '</div>'     '<div >'     + '<div >'     + '<div >'     + '<div >'     + '<i ></i>'     + '</div>'     + '<div >'     + '<i ></i>'     + '</div>'     + '<div ></div>'     + '</div>'     + '<div >'     + '<div ></div>'     + '<div >'     + '<div >'     + '<div >'     //+ '<div ></div>'     + '</div>'     + '</div>'     + '</div>'     + '</div>'     + '</div>'     + '</div>' }; //参数调整 options = options || {}; for (var prop in defaults) {  if (typeof options[prop] === 'undefined') {   options[prop] = defaults[prop];  } } this.attrs = options; //触摸起始点记录 this.touchesStart = {}; //初始化内容 this.init();};Calendar.prototype = { constructor: Calendar, init: function (id) {  //初始化界面  this.render(id);  //初始化事件  this.initEvents();  //初始布局页面  this.layout();  /**   * 初始化参数   * this.index  切换页面索引   * this._initEd 是否初始化完成   * this._interval 动画切换锁,防止动画重复触发   * this.offsetValue 切换容器宽度,页面resize时,需要更新该值   */  this.index = 0;  this._initEd = true;  this._interval = true;  this.offsetValue = this.monthEle.offsetWidth;  //节点操作  this.timeNowEle = doc.querySelector("#timeNow");  this.bigTimeEle = doc.querySelector(".bigTime");  //this.noliDateEle = doc.querySelector(".noliDate");  //this.gooList = doc.querySelector(".gooList");  this.badList = doc.querySelector(".badList");  //this.timePannel = doc.getElementById("timePannel");  this.prevMonthEle = doc.querySelector(".prev-month-html");  this.currMonthEle = doc.querySelector(".current-month-html");  this.nextMonthEle = doc.querySelector(".next-month-html");  //初始化 aside页面  this.setAside();  //默认加载当天的考勤记录  var strDate = g.formatDate(new Date(), 'YMD');  this.attrs.sltDateFuc(strDate); }, render: function () {  this.attrs.parentNode.innerHTML = this.attrs.template; }, pad2 : function (n) {  return n < 10 ? '0' + n : n }, /**  * 设置aside侧边栏内容  * @param date 指定日期  */ setAside: function (date) {  date = date || new Date();  var year = date.getFullYear(),   month = date.getMonth(),   day = date.getDate();  var noli = Util.getLunarCalendar(year, month + 1, day);  var suitTaboo = Util.getSuitAndTaboo(year, month + 1, day);  //var gooStr = "<i>宜</i>";  //var badStr = "<i>忌</i>";  this.timeNowEle.innerHTML = year + "年" + this.pad2(month + 1) + "月";  //+ "<span>" + this.attrs.dayLongNames[date.getDay()] + "</span>";  this.bigTimeEle.innerHTML = year + '-' + (month + 1) + '-' + day;  //this.noliDateEle.innerHTML = "<p>" + noli["month"] + noli["date"] +"</p>"  //        + "<p>" + Util.getSexagenaryCycle(year) + "【" +Util.getZodiac(year) + "】" +"</p>";  //for(var i = 0, len = suitTaboo["suit"].length; i < len; i++) {  // gooStr += "<span>" + suitTaboo["suit"][i] +"</span>";  //}  //for(var i = 0, len = suitTaboo["taboo"].length; i < len; i++) {  // badStr += "<span>" + suitTaboo["taboo"][i] + "</span>";  //}  //this.gooList.innerHTML = gooStr;  //this.badList.innerHTML = badStr; }, /**  * 初始化事件  */ initEvents: function () {  var self = this;  var monthEle = this.monthEle = doc.querySelector("." + this.attrs.monthContainer);  this.timeChooseEle = doc.querySelector(".timeChoose");  this.goPrev = doc.querySelector(".goPrev");  this.goNext = doc.querySelector(".goNext");  monthEle.addEventListener("mousedown", this._handleTouchStart.bind(this), false);  monthEle.addEventListener("mousemove", this._handleTouchMove.bind(this), false);  monthEle.addEventListener("mouseup", this._handleTouchEnd.bind(this), false);  monthEle.addEventListener("touchstart", this._handleTouchStart.bind(this), false);  monthEle.addEventListener("touchmove", this._handleTouchMove.bind(this), false);  monthEle.addEventListener("touchend", this._handleTouchEnd.bind(this), false);  monthEle.addEventListener("tap", this._handleClick.bind(this), false);//click change to tap  monthEle.addEventListener("touchstart", this._handleClick.bind(this), false);  this.goPrev.addEventListener("tap", function (event) {   self.turnPre();  }, false);  this.goNext.addEventListener("tap", function (event) {   self.turnNext();  }, false);  /**   * BUG: 问题, bind(this)的事件函数, 无法removeEventListener   * 监听动画完成事件   */  monthEle.addEventListener("transitionend", this._transformEnd.bind(this), false);  monthEle.addEventListener("webkitTransitionEnd", this._transformEnd.bind(this), false);  //操作表操作,事件委托处理  this.timeChooseEle.addEventListener("tap", this._handleTimeChoose.bind(this), false);  document.addEventListener("tap", this._handleDocument.bind(this), false);  //页面resize监听,函数节流,调整布局  window.addEventListener("resize", this._handleResize.bind(this), false); }, /**  * 关闭下拉菜单  * @param event  * @private  */ _handleDocument: function (event) {  var target = event.target,   cls = target.className;  if (cls !== "pullDown") {   var btns = document.querySelectorAll(".buttonGroup");   for (var i = 0, len = btns.length; i < len; i++) {    btns[i].classList.remove("open");   }  } }, /**  * 工具栏事件绑定, 提供日期变更(年+月 ), 返回今天等功能  * @param event  * @private  */ _handleTimeChoose: function (event) {  event.preventDefault();  var target = event.target,   parentNode = target.parentNode,   cls = target.className;  //排除非元素节点  if (target.nodeType !== 1) {   return;  }  if (cls === "pullDown") {   var pCls = parentNode.className.split(" ");   if (pCls.indexOf("open") === -1) {    parentNode.classList.add("open");   } else {    parentNode.classList.remove("open");   }  }  //返回今天  if (cls === "returnToday" || parentNode.className === "returnToday") {   this.resetDate(new Date());  }  //年份更新  if (cls === "list-year") {   var year = parseInt(target.getAttribute("data-year")),    month = parseInt(doc.getElementById("op-month-time").textContent) - 1;   doc.getElementById("op-year-time").textContent = year + "年";   this.resetDate(new Date(year, month));  }  //月份更新  if (cls === "list-month") {   var year = parseInt(doc.getElementById("op-year-time").textContent),    month = parseInt(target.getAttribute("data-month"));   doc.getElementById("op-month-time").textContent = month + "月";   this.resetDate(new Date(year, month));  } }, _handleResize: function (event) {  var self = this;  //函数节流, 重新调整宽度  self.resizeInterval = setTimeout(function () {   self.offsetValue = self.monthEle.offsetWidth;  }, 300) }, _handleClick: function (event) {  event.preventDefault();  var target = event.target,   eleName = target.nodeName;  if (eleName === "SPAN" || target.className === "dayTd") {   var aim = eleName === "SPAN" ? target.parentNode : target;   var year = parseInt(aim.getAttribute("data-year")),    month = parseInt(aim.getAttribute("data-month")),    day = parseInt(aim.getAttribute("data-day"));   if (this._oldEle) {    this._oldEle.classList.remove("date-selected");   }   aim.classList.add("date-selected");   this._oldEle = aim;   this.setAside(new Date(year, month, day))   if (event.type == 'tap') {    //根据日期加载打卡记录列表    var sltDate = year + '-' + this.pad2(month + 1) + '-' + day;    this.attrs.sltDateFuc(sltDate); //执行回调   }  } }, _handleTouchStart: function (event) {  event.preventDefault();  //屏蔽多次触发  if (!this._interval) {   return;  }  this.isTouched = true;  if (event.type === "touchstart") {   this.touchesStart.x = event.targetTouches[0].pageX;  } else {   this.touchesStart.x = event.pageX;  } }, _handleTouchMove: function (event) {  event.preventDefault();  if (!this.isTouched) {   return;  }  this.isMoved = true;  if (event.type === "touchmove") {   var pageX = event.targetTouches[0].pageX;  } else {   var pageX = event.pageX;  }  //横向移动距离  this.touchesDiff = pageX - this.touchesStart.x;  this.endPos = pageX;  //设置样式  this.monthEle.style[Util.prefix + "transition"] = "all 0ms";  this.monthEle.style[Util.prefix + "transform"] = "translate3d(" + (this.index * this.offsetValue + this.touchesDiff) + "px, 0px, 0px)"; }, _handleTouchEnd: function (event) {  event.preventDefault();  if (!this.isTouched || !this.isMoved) {   this.isTouched = false;   this.isMoved = false;   return;  }  var comPos = this.endPos - this.touchesStart.x;  //移动距离对比  if (Math.abs(comPos) < this.attrs.limitDis) {   this._transformPage();  } else {   if (comPos < 0) {    this.turnNext(); //下一页   } else {    this.turnPre(); //上一页   }  }  this.isTouched = false;  this.isMoved = false; }, turnPre: function () {  if (!this._interval) {   return;  }  this.index++;  this._isTurnPage = true;  this._offset = "prev";  //锁上操作, 防止多次触发  this._interval = false;  this._transformPage(); }, turnNext: function () {  if (!this._interval) {   return;  }  this.index--;  this._isTurnPage = true;  this._offset = "next";  //锁上操作, 防止多次触发  this._interval = false;  this._transformPage(); }, _transformPage: function () {  this.monthEle.style[Util.prefix + "transition"] = "300ms";  this.monthEle.style[Util.prefix + "transform"] = "translate3d(" + (this.index * 100) + "%, 0, 0)"; }, /**  * 提示日期tip,仅在移动端有效(宽度 < 425px 触发)  * @private  */ _tipPannel: function () {  var self = this;  if (this.offsetValue > 425) {   return;  }  var year = this.value.getFullYear(),   month = this.value.getMonth() + 1;  this.timePannel.textContent = year + "年" + month + "月";  clearTimeout(this.tipInterval);  this.timePannel.style["display"] = "block";  //强制relayout,否则动画无效果  self.timePannel.offsetWidth;  this.timePannel.style["opacity"] = 1;  this.tipInterval = setTimeout(function () {   self.timePannel.style["opacity"] = 0;   self.timePannel.style["display"] = "none";  }, 800); }, /**  * 翻页结束后触发回调事件  * @private  */ _transformEnd: function () {  //不是翻页不行  var offset = this._offset;  if (!this._isTurnPage) {   return;  }  var date = new Date(this.value);  var year = date.getFullYear(),   month = date.getMonth();  //下个月  if (offset === 'next') {   if (month === 11) {    date = new Date(year + 1, 0);   } else {    date = new Date(year, month + 1, 1);   }  }  //上个月  if (offset === 'prev') {   if (month === 0) {    date = new Date(year - 1, 11);   } else {    date = new Date(year, month - 1, 1);   }  }  this.value = date;  //this._tipPannel();  this.layout();  // 重定位  var index = this.index * -1;  //重新获取 时间容器节点  this.prevMonthEle = doc.querySelector(".prev-month-html");  this.currMonthEle = doc.querySelector(".current-month-html");  this.nextMonthEle = doc.querySelector(".next-month-html");  this.prevMonthEle.style[Util.prefix + "transform"] = "translate3d(" + (index - 1) * 100 + "%, 0px, 0px)";  this.currMonthEle.style[Util.prefix + "transform"] = "translate3d(" + (index) * 100 + "%, 0px, 0px)";  this.nextMonthEle.style[Util.prefix + "transform"] = "translate3d(" + (index + 1) * 100 + "%, 0px, 0px)";  doc.getElementById("op-year-time").textContent = this.value.getFullYear() + "年";  doc.getElementById("op-month-time").textContent = (this.value.getMonth() + 1) + "月";  //恢复锁,可以继续触发  this._interval = true;  this._isTurnPage = false; }, /**  * 指定时间,重置日期内容  * @param date 时间  */ resetDate: function (date) {  this.value = date;  this.index = 0;  this.monthEle.style[Util.prefix + "transition"] = "all 0ms";  this.monthEle.style[Util.prefix + "transform"] = "translate3d(0 ,0 ,0)";  this.prevMonthEle.style[Util.prefix + "transform"] = "translate3d(-100%, 0px, 0px)";  this.currMonthEle.style[Util.prefix + "transform"] = "translate3d(0%, 0px, 0px)";  this.nextMonthEle.style[Util.prefix + "transform"] = "translate3d(100%, 0px, 0px)";  doc.getElementById("op-year-time").textContent = this.value.getFullYear() + "年";  doc.getElementById("op-month-time").textContent = (this.value.getMonth() + 1) + "月";  this.layout(); }, /**  * 布局函数  */ layout: function () {  var layoutDate = this.value ? this.value : new Date().setHours(0, 0, 0, 0);  this.value = layoutDate;  //三个月的 HTML信息  var prevMonthHTML = this.monthHTML(layoutDate, 'prev');  var currentMonthHTML = this.monthHTML(layoutDate);  var nextMonthHTML = this.monthHTML(layoutDate, 'next');  var monthHTML = '<div ><div >' + prevMonthHTML + "</div></div>"      + '<div ><div >' + currentMonthHTML + "</div></div>"      + '<div ><div >' + nextMonthHTML + "</div></div>"  if (!this._initEd) {   //初次渲染的时候使用, 否则不使用   //渲染 星期头部   var weekHeaderHTML = [];   for (var i = 0; i < 7; i++) {    var weekDayIndex = (i + this.attrs.firstDay > 6) ? (i - 7 + this.attrs.firstDay) : (i + this.attrs.firstDay);    var dayName = this.attrs.dayNames[weekDayIndex];    if (this.attrs.weekendDays.indexOf(weekDayIndex) !== -1) {     //休息日样式     weekHeaderHTML.push('<div >' + dayName + '</div>');    } else {     weekHeaderHTML.push('<div >' + dayName + '</div>');    }   }   var yearSelectHTML = [],    monthSelectHTML = [];   for (var i = 1900; i <= 2050; i++) {    var str = "<li class='list-year' data-year='" + i + "'>" + i + "年</li>";    yearSelectHTML.push(str);   }   for (var i = 1; i <= 12; i++) {    var str = "<li class='list-month' data-month='" + (i - 1) + "'>" + i + "月</li>";    monthSelectHTML.push(str);   }   doc.querySelector("." + this.attrs.weekHandler).innerHTML = weekHeaderHTML.join("");   doc.querySelector("." + this.attrs.toolBar).innerHTML = '<div >'                 + '<div >'                 + '<div >'                 + '<span id="op-year-time">' + new Date().getFullYear() + '年</span>'                 + '<span >+</span>'                 + '</div>'                 + '<div >'                 + '<ul>' + yearSelectHTML.join('') + '</ul>'                 + '</div>'                 + '</div>'                 + '</div>'                 + '<div >'                 + '<div >'                 + '<div >'                 + '<span id="op-month-time">' + (new Date().getMonth() + 1) + '月</span>'                 + '<span >+</span>'                 + '</div>'                 + '<div >'                 + '<ul>' + monthSelectHTML.join('') + '</ul>'                 + '</div>'                 + '</div>'                 + '</div>'                 + '<div ><span>返回今天</span></div>'  }  doc.querySelector("." + this.attrs.monthContainer).innerHTML = monthHTML; }, /**  * 获取当月总天数  * @param date 日期  */ totalDaysInMonth: function (date) {  var d = new Date(date);  return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate(); }, /**  * 日期HTML设置  * @param date 设置时间  * @param offset 设置偏移 ["next" -> "下个月" "prev" -> "上个月"]  * @returns {string} 返回拼接好的HTML字符串  */ monthHTML: function (date, offset) {  var date = new Date(date);  var year = date.getFullYear(),   month = date.getMonth(),   day = date.getDate();  //下个月  if (offset === 'next') {   if (month === 11) {    date = new Date(year + 1, 0);   } else {    date = new Date(year, month + 1, 1);   }  }  //上个月  if (offset === 'prev') {   if (month === 0) {    date = new Date(year - 1, 11);   } else {    date = new Date(year, month - 1, 1);   }  }  //调整时间  if (offset === 'next' || offset === 'prev') {   month = date.getMonth();   year = date.getFullYear();  }  //上月 | 本月 总天数, 本月第一天索引  var daysInPrevMonth = this.totalDaysInMonth(new Date(date.getFullYear(), date.getMonth()).getTime() - 10 * 24 * 60 * 60 * 1000),   daysInMonth = this.totalDaysInMonth(date),   firstDayOfMonthIndex = new Date(date.getFullYear(), date.getMonth()).getDay();  if (firstDayOfMonthIndex === 0) {   firstDayOfMonthIndex = 7;  }  var dayDate,   rows = 5,//日历行数   cols = 7,   monthHTML = [],   dayIndex = 0 + (this.attrs.firstDay - 1),   today = new Date().setHours(0, 0, 0, 0);  for (var i = 1; i <= rows; i++) {   var row = i;   var tdList = [];   for (var j = 1; j <= cols; j++) {    var col = j;    dayIndex++;    var dayNumber = dayIndex - firstDayOfMonthIndex;    //要添加的类名, 默认dayTd    var classNames = ["dayTd"];    if (dayNumber < 0) {     //上个月日期     classNames.push("date-prev");     dayNumber = daysInPrevMonth + dayNumber + 1;     dayDate = new Date(month - 1 < 0 ? year - 1 : year, month - 1 < 0 ? 11 : month - 1, dayNumber).getTime();    } else {     dayNumber = dayNumber + 1;     if (dayNumber > daysInMonth) {      //下个月日期      classNames.push("date-next");      dayNumber = dayNumber - daysInMonth;      dayDate = new Date(month + 1 > 11 ? year + 1 : year, month + 1 > 11 ? 0 : month + 1, dayNumber).getTime();     } else {      dayDate = new Date(year, month, dayNumber).getTime();     }    }    //今天 date-current    if (dayDate === today) {     classNames.push("date-current");    }    //周六日 date-reset    if (dayIndex % 7 === this.attrs.weekendDays[0] || dayIndex % 7 === this.attrs.weekendDays[1]) {     classNames.push("date-reset");    }    dayDate = new Date(dayDate);    var dayYear = dayDate.getFullYear();    var dayMonth = dayDate.getMonth();    //农历日期    var ccalendar = Util.getLunarCalendar(dayYear, dayMonth + 1, dayNumber);    var holiday = this.attrs.holiday[(dayMonth + 1) + "-" + dayNumber];    //节日显示,优先级别:公历节日 > 农历节日 > 节气 > 农历 date-holiday    if (holiday) {     var alamanac = holiday;     classNames.push("date-holiday");    } else {     if (ccalendar["festival"]) {      var alamanac = ccalendar["festival"];      classNames.push("date-holiday");     } else {      if (ccalendar["solarTerm"]) {       var alamanac = ccalendar["solarTerm"];       classNames.push("date-holiday");      } else {       var alamanac = ccalendar["date"];      }     }    }    //集合包含dayNumber    var _appData = this.attrs.appData;    var _tagHtml = '';    if (_appData.attendance.contains(dayNumber))//应出勤    {     classNames.push("attendance");    }    if (_appData.actualAttendance.contains(dayNumber)) {//实际出勤     classNames.push("actualAttendance");    }    if (_appData.beLate.contains(dayNumber)) {//迟到     classNames.push("beLate");     _tagHtml = '<i >迟</i>';    }    if (_appData.leaveEarly.contains(dayNumber)) {//早退     _tagHtml = '<i >退</i>';     classNames.push("leaveEarly");    }    tdList.push(      '<div ") + '" data-year=' + dayYear + ' data-month=' + dayMonth + ' data-day=' + dayNumber + '>'       + '<span >' + _tagHtml +dayNumber + "</span>"     + '<span >' + alamanac + "</span>"     + '</div>'    )   }   monthHTML.push(    '<div >' + tdList.join("") + '</div>'   )  }  return monthHTML.join(""); }, /**  * 格式化日期内容  * @param date  * @returns {string|*/ formatDate: function (date) {  date = new Date(date);  var year = date.getFullYear();  var month = date.getMonth();  var month1 = month + 1;  var day = date.getDate();  var weekDay = date.getDay();  return this.attrs.dateFormat   .replace(/yyyy/g, year)   .replace(/yy/g, (year + '').substring(2))   .replace(/mm/g, month1 < 10 ? '0' + month1 : month1)   .replace(/m/g, month1)   .replace(/MM/g, this.attrs.monthNames[month])   .replace(/dd/g, day < 10 ? '0' + day : day)   .replace(/d/g, day)   .replace(/DD/g, this.attrs.dayNames[weekDay]) }, /** * 获取上一个月 * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ getPreMonth: function (date) {  var arr = date.split('-');  var year = arr[0]; //获取当前日期的年份  var month = arr[1]; //获取当前日期的月份  var day = arr[2]; //获取当前日期的日  var days = new Date(year, month, 0);  days = days.getDate(); //获取当前日期中月的天数  var year2 = year;  var month2 = parseInt(month) - 1;  if (month2 == 0) {   year2 = parseInt(year2) - 1;   month2 = 12;  }  var day2 = day;  var days2 = new Date(year2, month2, 0);  days2 = days2.getDate();  if (day2 > days2) {   day2 = days2;  }  if (month2 < 10) {   month2 = '0' + month2;  }  var t2 = year2 + '-' + month2 + '-' + day2;  return t2; }, /**  * 获取下一个月  * @date 格式为yyyy-mm-dd的日期,如:2014-01-25  */ getNextMonth: function (date) {  var arr = date.split('-');  var year = arr[0]; //获取当前日期的年份  var month = arr[1]; //获取当前日期的月份  var day = arr[2]; //获取当前日期的日  var days = new Date(year, month, 0);  days = days.getDate(); //获取当前日期中的月的天数  var year2 = year;  var month2 = parseInt(month) + 1;  if (month2 == 13) {   year2 = parseInt(year2) + 1;   month2 = 1;  }  var day2 = day;  var days2 = new Date(year2, month2, 0);  days2 = days2.getDate();  if (day2 > days2) {   day2 = days2;  }  if (month2 < 10) {   month2 = '0' + month2;  }  var t2 = year2 + '-' + month2 + '-' + day2;  return t2; }};var Util = { /**  * css前缀判断,仅执行一次  */ prefix: (function () {  var div = document.createElement('div');  var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';  div.style.cssText = cssText;  var style = div.style;  if (style.transition) {   return '';  }  if (style.webkitTransition) {   return '-webkit-';  }  if (style.MozTransition) {   return '-moz-';  }  if (style.oTransition) {   return '-o-';  }  if (style.msTransition) {   return '-ms-';  } })(), /**  * 公历转化为积日(积日:1900年1月0日到当天的天数  * @param year 年份  * @param month 月份  * @param day 日期  * @returns {number}  * @private  */ _gregorianCalendarToAccumulateDate: function (year, month, day) {  var accumulateDate = 0;  accumulateDate += (year - 1900) * 365; //假设每年365天,计算天数  accumulateDate += parseInt((year - 1901) / 4); //将闰年数累加计数  for (var eachMonth = month - 1; eachMonth > 0; eachMonth--) {   accumulateDate += (new Date(year, eachMonth, 0)).getDate(); //累加当年各月天数  }  accumulateDate += day; //累加最后一月天数  return accumulateDate; //返回公历日期对应积日 }, /**  * 计算积日的农历日期  * @param accumulateDate  * @returns {number}  * @private  */ _getLunarDate: function (accumulateDate) {  //逆推估算是第几个朔日  var reverseCalends = parseInt((accumulateDate - 1.6) / 29.5306);  var calends = reverseCalends - 1;  do {   calends++;   //计算朔日积日   var calendsAccumulateDate = parseInt(1.6 + 29.5306 * calends + 0.4 * Math.sin(1 - 0.45058 * calends));   var solarTermDate = accumulateDate - calendsAccumulateDate + 1;  } while (solarTermDate >= 30);  //下一个朔日在当天的次日,当月即为大月,当日为农历三十  if (solarTermDate === 0)   return 30;  else   return solarTermDate; }, /**  * 计算某年某个节气的积日(公式)  * @param differenceYear  * @param solarTermSerialNumber  * @returns {Number}  * @private  */ _getSolarTermAccumulateDate: function (differenceYear, solarTermSerialNumber) {  var solarTermAccumulateDate = parseInt(365.242 * differenceYear + 6.2 + 15.22 * solarTermSerialNumber - 1.9 * Math.sin(0.262 * solarTermSerialNumber));  return solarTermAccumulateDate; }, /**  * 获取农历日期  * @param year  * @param month  * @param day  * @returns {{month: string, date: string, solarTerm: string, festival: *}}  */ getLunarCalendar: function (year, month, day) {  //常量数组  var monthName = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "腊月"];  var dateName = ["十", "一", "二", "三", "四", "五", "六", "七", "八", "九"];  var datePrefixName = ["初", "十", "廿", "三"];  var solarTermName = ["小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "露水", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至"];  var festivalName = {   "0101": "春节",   "0115": "元宵节",   "0202": "龙头节",   "0505": "端午",   "0707": "七夕",   "0715": "中元节",   "0815": "中秋",   "0909": "重阳节",   "1001": "寒衣节",   "1015": "下元节",   "1208": "腊八节",   "1223": "小年",   "1230": "除夕"  };  var differenceYear = year - 1900; //年份距1900年差值  var solarTermSerialNumber = month * 2 - 1; //节气序号  var lunarCalendarMonth = (month - 1 + 12) % 12; //理论农历月份  var accumulateDate = Util._gregorianCalendarToAccumulateDate(year, month, day); //计算当前日期积日  var lunarDate = Util._getLunarDate(accumulateDate); //计算农历日期  //计算前一个月、当月、后一个月、前半个月以及后半个月的节气日期(STLD)和节气积日(STAD)  var curSTLD = Util._getLunarDate(Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber));  var prevSTLD = Util._getLunarDate(Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber - 2));  var nextSTLD = Util._getLunarDate(Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber + 2));  var halfPrevSTLD = Util._getLunarDate(Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber - 1));  var halfNextSTLD = Util._getLunarDate(Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber + 1));  var curSTAD = Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber);  var prevSTAD = Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber - 2);  var nextSTAD = Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber + 2);  var halfPrevSTAD = Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber - 1);  var halfNextSTAD = Util._getSolarTermAccumulateDate(differenceYear, solarTermSerialNumber + 1);  //通过节气日期判断闰月情况,调整月份  if (accumulateDate < curSTAD && lunarDate + curSTAD - accumulateDate !== curSTLD)   lunarCalendarMonth--;  else if (accumulateDate > curSTAD && lunarDate - (accumulateDate - curSTAD) !== curSTLD && lunarDate + nextSTLD - accumulateDate === nextSTAD)   lunarCalendarMonth++;  //判断是否是节气  if (curSTAD === accumulateDate)   var solarTerm = solarTermName[solarTermSerialNumber];  else if (halfPrevSTAD === accumulateDate)   var solarTerm = solarTermName[solarTermSerialNumber - 1];  else if (halfNextSTAD === accumulateDate)   var solarTerm = solarTermName[solarTermSerialNumber + 1];  //计算是否节日  var monthNumber = lunarCalendarMonth;  if (monthNumber < 10)   var festivalNumber = "0" + monthNumber;  else   var festivalNumber = monthNumber;  if (lunarDate < 10)   festivalNumber += "0" + lunarDate;  else   festivalNumber += lunarDate; //拼接字符串  var festivalString = festivalName[festivalNumber]; //调用节日  //计算农历名称  var monthString = monthName[(monthNumber + 11) % 12]; //月份名称  var prefix = parseInt((lunarDate - 1) / 10);  if (lunarDate === 20 || lunarDate === 30)   var dateString = datePrefixName[prefix + 1];  else   var dateString = datePrefixName[prefix];  dateString += dateName[lunarDate % 10]; //日期名称  //返回结果  var result = {   'month': monthString,   'date': dateString,   'solarTerm': solarTerm,   'festival': festivalString  };  return result; }, /**  * 判断年份干支  * @param year 公历年份  * @returns {string} 返回干支  */ getSexagenaryCycle: function (year) {  //常量数组  var heavenlyStems = ["癸", "甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬"];  var earthlyBranches = ["亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌"];  //计算与1963年的差值(1964年为甲子年)  var yearSerialNumber = year - 1863;  //拼接该年干支  var sexagenaryCycle = heavenlyStems[yearSerialNumber % 10];  sexagenaryCycle += earthlyBranches[yearSerialNumber % 12];  sexagenaryCycle += "年";  return sexagenaryCycle; }, /**  * 获取生肖年份  * @param year  * @returns {string}  */ getZodiac: function (year) {  //常量数组  var zodiacName = ["猪年", "鼠年", "牛年", "虎年", "兔年", "龙年", "蛇年", "马年", "羊年", "猴年", "鸡年", "狗年"];  //计算与1963年的差值(1964年为甲子年)  var yearSerialNumber = year - 1863;  return zodiacName[yearSerialNumber % 12]; }, /**  * 玄学啊,获取禁忌事情  * @param year  * @param month  * @param day  * @returns {{suit: string, taboo: string}}  */ getSuitAndTaboo: function (year, month, day) {  var suit = ["开光", "嫁娶", "入宅", "上梁", "祭祀", "出行", "作灶", "破土", "订盟", "祈福"];  var taboo = ["纳采", "冠笄", "竖柱", "掘井", "伐木", "理发", "交易", "探病", "雕刻", "斋醮"];  var dateString = parseInt((year * month * day) % 1025).toString(2);  var len = dateString.length;  if (len < 10)   for (; len < 10 ; len++)    dateString = "0" + dateString;  dateString = dateString.split("").reverse().join("");  var dateNum = parseInt(dateString, 2);  var suitResult = [];  var tabooResult = [];  for (var i = 0; i < 10; i++) {   if (dateNum % 2)    suitResult.push(taboo[i]);   else    tabooResult.push(suit[i]);   dateNum = parseInt(dateNum / 2);  }  var suitString = suitResult;  var tabooString = tabooResult;  var result = {   'suit': suitString,   'taboo': tabooString  }  return result; }};
View Code

calendar.css也是一样,我进行了改造,代码如下:

html { font-size: 16px;-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;/*不用10px 62.5% 因为chrome只支持12px最小*/}*,*:before,*:after { box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}[hidden],template {display: none;}a {background-color: transparent;text-decoration: none;}a:active,a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}b,strong {font-weight: bold;}dfn {font-style: italic;}mark {background: #ff0;color: #000;}small{font-size: 80%;}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 1em 40px;}hr {box-sizing: content-box;height: 0;}pre {overflow: auto;}code,kbd,pre,samp { font-family: monospace, monospace;font-size: 1em;}button,input,optgroup,select,textarea { color: inherit;font: inherit;margin: 0;}a,input,textarea,select,button { outline: 0;}button {overflow: visible;}button,select {text-transform: none;}button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button;cursor: pointer;}button[disabled],html input[disabled] { cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner { border: 0;padding: 0;}input { line-height: normal;}input[type="checkbox"],input[type="radio"] { box-sizing: border-box;padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto;}input[type="search"] { -webkit-appearance: textfield;box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}fieldset { border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}legend {border: 0;padding: 0;}textarea {overflow: auto;}optgroup {font-weight: bold;}.button:active {color: #0a8ddf;border-color: #0a8ddf;}/*p {margin: 1em 0;}*/body { position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;}@font-face { font-family: "icon-yuan";src: url("../fonts/icomoon.ttf");}.icon { font-family: icon-yuan !important;font-style: normal;display: inline-block;vertical-align: -2px;}.icon-left:after {content: '\f053';}.icon-right:after {content: '\f054';}html {height: 100%;}.container { width: 100%; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;flex-wrap: wrap;height: 100%;}.container > div {height: 100%;}.container .aside { color: #ffffff;width: 35%;padding: 15px 20px;}.container .main {width: 65%;padding-left: 15px;padding-right: 15px;}.timeNow {text-align: center;font-size: 0.85rem;}.timeNow span:first-child {margin-right: 10px;}.operator {position: relative;}.operator .goPrev { position: absolute;top: 0px;left: 0px;}.operator .goNext {position: absolute;top: 0px; right: 0px;}.operator i {color: #e02d2d;line-height: 2.2rem;cursor: pointer;}.operator i:hover {color: #fb0;}.dateContain {position: relative;}.dateContain .bigTime { text-align: center;font-family: arial;font-size: 10rem;}.dateContain .bigTime span { text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);}.dateContain .noliDate > p { font-size: 0.85rem;text-align: center;}.dateContain .goodBad { border-top: 2px solid #94c9ff;padding: 10px 7px;}.dateContain .goodBad > div i { font-style: normal;text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1); text-align: center;color: #fff;font-size: 1.1rem;}.dateContain .goodBad > div span { font-size: 0.7rem;margin-left: 8px;}.aside { background: #D2456A;background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2456A), to(#e42355));}.operator { height: 2.2rem;border-bottom: 2px solid #D2456A;}.datePicker { height: calc(100% - 4.4rem);overflow: hidden;}.dateUl {height: 100%;position: relative;}.dateUl .dateLi {height: 100%;position: absolute; width: 100%;}.dayThead,.dayTbody,.dayTr { display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;flex-wrap: wrap;}.dayTbody {height: calc(100% - 40px);}.dayTbody .dayTr { width: 100%;border-top: 1px solid #c8cacc; height: calc(100% / 5);}.dayTbody .dayTr .dayTd { display: -webkit-box; display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;-webkit-box-pack: center; -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;width: calc(14.28571429%);}.dayTbody .dayTr .dayTd .almanac { width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.dayTbody .dayTr .dayTd span.dayNumber { font-family: arial;color: #000;font-size: 1.2rem; line-height: 21px;height: 18px;}.dayTbody .dayTr .dayTd span.almanac { color: #616161;font-size: 0.7rem;line-height: 25px; height: 21px;}.dayTbody .dayTr .dayTd.date-reset span:first-child { color: #7FAEF5;}.dayTbody .dayTr .dayTd.date-holiday span:last-child { color: #7FAEF5;}.dayTbody .dayTr .dayTd.date-prev span:first-child,.dayTbody .dayTr .dayTd.date-next span:first-child,.dayTbody .dayTr .dayTd.date-prev span:last-child,.dayTbody .dayTr .dayTd.date-next span:last-child { color: #bfbfbf;}.dayTbody .dayTr .dayTd.date-selected { background-color: #47D5FF;}.dayTbody .dayTr .dayTd.date-selected span:first-child,.dayTbody .dayTr .dayTd.date-selected span:last-child { color: #fff;}.dayTbody .dayTr .dayTd.date-current { background-color: #fb0;}.dayTbody .dayTr .dayTd.date-current span:first-child,.dayTbody .dayTr .dayTd.date-current span:last-child { color: #ffffff !important;}.prev-month-html { -webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}.current-month-html { -webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}.next-month-html { -webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}.dayThead {height: 40px;}.dayThead .dayTd { line-height: 40px;border: none;color: #2c9bb3;}.dayThead .dayTd.active {color: #e02d2d;}.dayTbody .dayTd:hover {box-shadow: inset 0px 0px 4px #47D5FF;}.dayTd { height: 100%;-webkit-box-flex: 1;-webkit-flex: 1; -ms-flex: 1;flex: 1;text-align: center;cursor: pointer;}.dayTd .currentDay { background-color: #fb0;}.dayTd .restDay {background-color: #fff0f0;}.pannel { position: fixed;width: 100%;top: 30%;left: 0px;text-align: center;line-height: 40px;height: 40px; background-color: rgba(227, 36, 85, 0.86);color: #ffffff;opacity: 0;display: none;-webkit-transition: opacity 300ms;transition: opacity 300ms;}@media only screen and (min-width: 701px) { .container{height:500px;}}@media only screen and (max-width: 700px) { .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column;flex-direction: column;height:305px; } .container .aside { width: 100%;height: 30%; padding: 5px; } .container .main { width: 100%;height: 100%;} .bigTime {line-height: 1;font-size: 5.3rem !important;} .operator { display: none; } .datePicker { height: calc(100% - 10px);} .noliDate { display: -webkit-box;display: -webkit-flex;display: -ms-flexbox; display: flex; -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center; } .noliDate p {margin: 0 10px;} .goodBad { display: none;}}.dateUlContainer { height: 100%;width: 100%;overflow: hidden;}.yearChoose,.monthChoose,.returnToday { display: inline-block;font-size: 0.7rem;margin-right: 10%;}.returnToday { background-color: #f2f2f2;border: 1px solid #999;padding: 2px 10px;cursor: default;}.timeChoose { width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;padding: 0.5rem 20px;}.chooseContainer { position: relative;font-size: 0.7rem;color: #333;}.chooseContainer .buttonGroup { border: 1px solid #999;border-bottom-color: #d8d8d8;border-right-color: #d8d8d8;padding-left: 5px;line-height: 1;}.chooseContainer .buttonGroup span { display: inline-block;}.chooseContainer .buttonGroup span.yearTime,.chooseContainer .buttonGroup span.monthTime { margin: 0px 8px;}.chooseContainer .buttonGroup span.pullDown { width: 1.2rem;line-height: 1.2rem;cursor: default;text-align: center;border-left: 1px solid #d8d8d8;background-color: #f2f2f2;}.chooseContainer .pullSelect { display: none;width: 100%; position: absolute; z-index: 20; height: 432px;border: 1px solid #bbb;background: #fff;overflow-y: scroll;}.chooseContainer .pullSelect.open { display: block;}.chooseContainer .pullSelect ul { background-color: #fff;list-style: none;}.chooseContainer .pullSelect ul li { padding: 5px 10px;}.chooseContainer .pullSelect ul li:hover { cursor: default;background-color: #f2f2f2;}.buttonGroup.open ~ .pullSelect { display: block;}@media only screen and (min-width: 700px) { html {font-size: 21.33333333px !important;} .dateContain .bigTime { font-size: 9rem;}}@media only screen and (min-width: 800px) { html {font-size: 21.6px !important;} .dateContain .bigTime {font-size: 9rem;}}@media only screen and (min-width: 998px) { html {font-size: 25.6px !important;}}/*page css*/.div-yearmonth,.div-operate,.ul-operate{background-color: #449DED;text-align: center;color: #FFFFFF;}.div-yearmonth{height: 42px;line-height: 42px;font-size: 16px;}.div-yearmonth .mui-icon{font-size: 20px;}.spn-today{margin: 0 10px;}#timeNow{margin-left: 5px;}.div-operate{height:56px;line-height:56px;}.ul-operate{height:56px;width:100%;}.ul-operate a{height:56px;width:25%;}.ul-operate a p{height:28px;color:#ffffff;line-height:22px;}.ul-operate a p:first-child{line-height:36px;}#container{margin-top:8px;}.mui-segmented-control .mui-control-item.mui-active:after { /*display: block;content: '';width: 70%;border-width: 1px;border-style: solid; border-color: #ffffff;position: relative;bottom: 1px;margin: 0 auto;left: 0%;*/ /*细下划线*/ content: '';width: 0;display: block;height: 0;bottom: 1px;margin: 0 auto; border-right: 8px solid transparent;border-bottom: 8px solid #FFFFFF;border-left: 8px solid transparent;/*三角形*/}.dayTbody .dayTr .dayTd.attendance{background-color:#F2F9FF;}.dayTbody .dayTr .dayTd.actualAttendance{background-color:#F2F9FF;}.dayTbody .dayTr .dayTd.beLate{background-color:#FFE1E1;}.dayTbody .dayTr .dayTd.leaveEarly{background-color:#FFF1D4;}.dayTbody .dayTr .dayTd.attendance.date-selected,.dayTbody .dayTr .dayTd.actualAttendance.date-selected,.dayTbody .dayTr .dayTd.beLate.date-selected,.dayTbody .dayTr .dayTd.leaveEarly.date-selected{ background-color:#47D5FF;}.dayTbody .dayTr .dayTd.attendance.date-current,.dayTbody .dayTr .dayTd.actualAttendance.date-current,.dayTbody .dayTr .dayTd.beLate.date-current,.dayTbody .dayTr .dayTd.leaveEarly.date-current{ background-color:#fb0;}.dayTbody .dayTr .dayTd.date-next,.dayTbody .dayTr .dayTd.date-prev/*.dayTbody .dayTr .dayTd.date-next.date-selected,.dayTbody .dayTr .dayTd.date-prev.date-selected*/{ background-color:#fff;color:#bfbfbf;}.dayTbody .dayTr .dayTd.date-next.date-selected,.dayTbody .dayTr .dayTd.date-prev.date-selected{ background-color:#47D5FF;color:#fff;}/*.dayTbody .dayTr .dayTd.date-next.date-selected span:first-child,.dayTbody .dayTr .dayTd.date-prev.date-selected span:last-child{ color:#bfbfbf !important;}*/.date-next .dayNumber i.fl,.date-prev .dayNumber i.fl{display:none;}.dayNumber i.fl{font-size:12px;margin-top: -5px;margin-right: 10px;line-height: 0.8;position: absolute;display: block;}.font-warning{color:#FBD06B;}.font-danger{color:#FA6768;}.mui-scroll-wrapper.timeline{top:505px;}.emptyinfo{margin-top:10px;}.emptyinfo span.mui-icon{margin-bottom: 15px;}@media only screen and (max-height: 568px) {.emptyinfo {margin-top: 0px;}.emptyinfo span.mui-icon{font-size: 36px;margin-bottom: 5px;}}
View Code

注意事项

  • 忘记所有click的事件,通通采用tap事件代替,因为click会存在300ms的延时。
  • 不到万不得已,不要使用jquery,直接写原生js,因为jquery为了兼容各个版本的浏览器,写了许多的代码,而在手机上面的浏览器都是采用的Webkit内核,根本不需要考虑浏览器之间的兼容性问题,而且它能够很好的兼容css3特性。所以自然而然原生js的性能非常高,同时,你也不需要担心写js代码会很麻烦,HBuilder强大的智能提示和快捷键以及代码自动生成能力会让你写js快速如飞。
  • 能用vue.js就不要用angular,同vue.js比起来angular实在是太重,而且语法相对来说没那么优雅,学习曲线更是没那么平缓,做app对性能的要求是非常苛刻的。
  • 尽量不要使用位图,而是采用矢量图,因为矢量图渲染速度快,而且在不同分辨率下面不失真。
  • 矢量图图标,可以去阿里矢量库中查找,如果实在找不到,可以自己用AI做图标,然后生成svg格式,再上传到阿里矢量库中,最后统一打包下载下来,这样的话会把所有的矢量图标合成一张图片,减少文件数,还有,下载下来的文件中只需要保留icomoon.ttf和iconfont.css文件,因为我们只需要在移动端使用,记得修改iconfont.css文件去掉无用的引用。精简、极致。
  • HBuilder不要同时打开太多的项目,否则会很卡,而且HBuilder的错误智能感知比较弱,代码格式化也不够优雅,这些缺陷可以同时使用VS来解决(作为一名.net老鸟,吐血推荐的宇宙最强IDE),即同时用HBuilder和VS打开项目,用HBuilder写代码,VS进行格式化代码和语法查错,但是在切换IDE之前要记得保存代码,否则可能会造成代码覆盖,切记!
  • 能采用真机调试就不要用模拟器,原因还是速度!高效。

作为一个后台开发人员来说,写js还不是最痛苦的,最痛苦的是调css样式,尤其是还需要兼容iso和android以及不同的移动设备,更要命的是不同的css样式写法,同样的效果,渲染速度还不一样......

项目开发完成之后,我会将前端代码开源,目前还在开发中,敬请关注!

关于更多MUI跨平台开发的资料,可以参考我的上一篇文章:MUI开发大全

其它部分页面参考:2017-11-1 今天完成的界面,包括js交互实现