由于工作业务需求，要写一个日程表，日程表写之前 要先生成日历，废话不多说，直接 上代码：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>日程表title>
<link rel="stylesheet" href="/selfsupermarketAdmin/views/common/css/common/app.css">
<link rel="stylesheet" href="/selfsupermarketAdmin/views/common/css/style.css">
<style>
* {
box-sizing: border-box;
}
.rili {
float: left;
padding-left: 20px;
font-size: 12px;
overflow: hidden;
min-width: 1050px;
width: 100%;
}
.calendar {
float: left;
width: 23%;
border: 1px solid #BEBFC1;
margin-right: 20px;
margin-top: 20px;
height: 230px;
}
.calendar .calendar_title {
padding: 0.5em 0 0.5em 0;
text-align: center;
border-bottom: 1px solid #BEBFC1;
}
.calendar .calendar_week {
padding: 0.5em 0 0.5em 0;
}
.calendar .calendar_week span {
width: 14.2857%;
text-align: center;
display: inline-block;
}
.calendar .calendar_dateCon span {
padding: 0.5em 0 0.5em 0;
width: 14.2857%;
text-align: center;
display: block;
float: left;
}
style>
head>
<body class="container-fluid">
<div id="vue" v-cloak>
<div class="rili">
<div class="calendar" v-for="(items,index) in rili.datas">
<div class="calendar_title">{{index+1}}月div>
<div class="calendar_week">
<span>周日span><span>周一span><span>周二span><span>周三span><span>周四span><span>周五span><span>周六span>
div>
<div class="calendar_dateCon">
<span v-for="item in items" v-html="changeDate(item.date)">span>
div>
div>
div>
div>
<script src="/selfsupermarketAdmin/views/common/plugins/vue/vue.js">script>
<script src="/selfsupermarketAdmin/views/common/plugins/jquery/jquery-1.9.1.min.js">script>
<script src="/selfsupermarketAdmin/views/common/js/common.js">script>
<script>
function getMonth(year) {
var year = year || 2018;
var dayMseconds = 86400000;
var monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var resultArr = [];
function isRun() { //判断是否是闰年
if ((year % 400 == 0) || (year % 4 == 0) && (year % 100 != 0)) {
return true;
} else {
return false;
}
}
var run = isRun();
for (var m = 1; m < 13; m++) {
var arr = [];
var firstday = new Date(year + "-" + m + "-01").getTime();//拿到时间戳
var lastday = 30;
var weekDay = new Date(firstday).getDay(); //根据时间戳，拿到本月第一天的星期
var weekLastDay = weekDay + 31; //拿到本月最后一天的星期
switch (m) {
case 2:
if (run) {
lastday = new Date(year + "-" + m + "-29").getTime();
weekLastDay = weekDay + 29;
} else {
lastday = new Date(year + "-" + m + "-28").getTime();
weekLastDay = weekDay + 28;
}
break;
case 4:
lastday = new Date(year + "-" + m + "-30").getTime();
weekLastDay = weekDay + 30;
break;
case 6:
lastday = new Date(year + "-" + m + "-30").getTime();
weekLastDay = weekDay + 30;
break;
case 9:
lastday = new Date(year + "-" + m + "-30").getTime();
weekLastDay = weekDay + 30;
break;
case 11:
lastday = new Date(year + "-" + m + "-30").getTime();
weekLastDay = weekDay + 30;
break;
default :
lastday = new Date(year + "-" + m + "-31").getTime();//拿到时间戳
weekLastDay = weekDay + 31;
break;
}
var n = 0;
for (var i = 0; i < 42; i++) {
var content = {date: '', class: ''};
if (i < weekDay || i > weekLastDay - 1) {
arr.push(content);
} else {
n++
arr.push(
{
day: new Date(firstday + dayMseconds * n - dayMseconds).getDate(),
date: firstday + dayMseconds * n - dayMseconds,
class: ''
}
)
}
}
resultArr.push(arr);
}
// console.log(resultArr)
return resultArr
// document.getElementById('box').innerHTML = JSON.stringify(arr);
}
// var date = getMonth(2018);
// [[{date: '', class: ''}, {date: "当天时间戳", class: '类名'},], //length:42 没有日期的是空]
var vue = new Vue({
el: "#vue",
data: {
rili: {
year: 2018,
datas: getMonth(2018)
}
},
computed: {},
created: function () {
},
mounted: function () {
},
methods: {
changeDate: function (date) {
if (date) {
return new Date(date).getDate()
} else {
return ''
}
}
},
watch: {}
})
script>
body>
html>
效果图如下：
需要的朋友可以参考一下
在下面打个小广告：
本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些 页面定制开发。个人接单，价格实惠，只当是多交些朋友了。
在下面打个小广告：
本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些 页面定制开发。个人接单，价格实惠，只当是多交些朋友了。