用vue 简单写的日历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自制日历</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.calendar{
position: relative;
width: 350px;
height: 50px;
}
.header{
border: 1px solid black;
position: relative;
width: 342px;
text-align: center;
}
.year{
display: inline-block;
width: ;
}
.month{
display: inline-block;
}
.week{
padding: 0;
margin: 0;
}
.item{
float: left;
list-style: none;
width: 48px;
height: 21px;
text-align: center;
padding: 0;
margin: 0;
border-left:1px solid black ;
border-bottom: 1px solid black;
}
.item:last-child{
border-right: 1px solid black;
}
ul{
margin: 0;
padding: 0;
height: 21px;
}
.active{
background-color: dodgerblue;
}
.last,.prev{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="calendar">
<div class="header">
<div class="year">{{year+"年"}}</div>
<div class="month">{{month+"月"}}</div>
</div>
<ul class="week">
<li class="item">一</li>
<li class="item">二</li>
<li class="item">三</li>
<li class="item">四</li>
<li class="item">五</li>
<li class="item">六</li>
<li class="item">日</li>
</ul>
<ul class="dayList" v-for="(line,lineIndex) in showData" >
<li class="item" v-for="(showDay,dayIndex) in line" :class="{active:day==showDay}">{{showDay}}</li>
</ul>
</div>
<!--按钮组-->
<button type="button" @click="nextMonth">下一月</button>
<button type="button" @click="nextYear">下一年</button>
</div>
</body> <script type="text/javascript">
new Vue({
el:"#app",
data:{
//记录年月日
year:"",
month:"",
day:"",
//要展示和绑定的数据
showData:[[],[],[],[],[],[]],
prevDay:-1,//第1行占多少天
weekDay:7,//星期天数
allDay:42,//6行一共的天数
monthDay:[],//保存当前年每月的天数
},
created:function(){
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth()+1;
this.day = date.getDate();
this.monthDay = this.getMonthDay(this.year);
this.week = this.getWeek(this.year);
//初始化数据
this.changeDay();
},
methods:{
//判断是不是闰年
isLearYear:function(year){
var condition1 = year % 4 == 0;
var condition2 = year % 100 !=0;
var condition3 = year % 400 ==0;
return condition1 && condition2 || condition3;
},
//获得当前年的每月的天数
getMonthDay:function(year){
var _arr=[31,31,30,31,30,31,31,30,31,30,31];
if(this.isLearYear(year)){
//闰年
_arr.splice(1,0,29);
return _arr;
}else{
//平年
_arr.splice(1,0,28);
return _arr;
}
},
//当前年的一月一日是星期几
getWeek:function(year){
var _arr=["Mon","Web","Sat","Thu","Fri","Sat","Sun"];
var week = new Date(year+","+1+","+1).toString().split(" ")[0];
return _arr.indexOf(week);
}
,
//修改天数数据
changeDay:function(){
var _arr=[[],[],[],[],[],[]];
var index = Number(this.month-1);
var day =1;
//初始化
if(index == 0 ){
//1月
this.prevDay == this.week;
this.$set(this,"prevDay",this.week);
}else{
var allPrevDay=0;
for(var i=0;i<index;i++){
allPrevDay+=this.monthDay[i];
}
this.prevDay = (allPrevDay+this.week) % this.weekDay;
}
//第一行
for(var i=0;i<7;i++){
if(i<this.prevDay){
_arr[0].push("");
}else{
_arr[0].push(day);
day++;
}
}
//第二到第四行
for(var j=0;j<3;j++){
for(var k=0;k<7;k++){
_arr[j+1].push(day);
day++;
}
}
//第五行
for(var q=0;q<7;q++){
if(day > this.monthDay[index]){
_arr[4].push("");
}else{
_arr[4].push(day);
day++;
}
}
//第六行
for(var s=0;s<7;s++){
if(day>this.monthDay[index]){
_arr[5].push("");
}else{
_arr[5].push(day);
day++
}
}
//第五和第六可以合并成2层嵌套循环
this.$set(this,"showData",_arr);
},
nextMonth:function(e){
if(this.month == 12){
this.$set(this,"month",1);
this.$set(this,"year",this.year+1);
this.$set(this,"monthDay",this.getMonthDay(this.year));
this.week = this.getWeek(this.year);
}else{
this.$set(this,"month",this.month+1);
}
this.day=1;
this.changeDay();
},
nextYear:function(e){
this.$set(this,"year",this.year+1);
this.$set(this,"monthDay",this.getMonthDay(this.year));
this.week = this.getWeek(this.year);
this.day=1;
this.changeDay();
}, }
});
</script>
</html>
用vue 简单写的日历的更多相关文章
- js写个日历
其实我是一个对时间和日期不怎么感兴趣的人,小学的时候感觉时间或者日期那块就让我很晕,因为有时候是100进制有时候是60进制,搞的我对日历一直很不感兴趣,最近不知道为什么想写一个日历了,可想而知,这个玩 ...
- 如何为 Vue 项目写单元测试
https://www.w3ctech.com/topic/2052 如何为 Vue 项目写单元测试 前端工程 明非 2017-07-18 4685 访问 1 分享 微信分享 译者:明非 链接:htt ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- 像VUE一样写微信小程序-深入研究wepy框架
像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...
- java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
- Android GIS开发系列-- 入门季（13）Gdal简单写个shp文件
Gdal是用来读写栅格与矢量数据的,在Gdal官网,可以下载相关的资源进行平台的编译.其实Arcgis底层也是用Gdal来读取shp文件的,那在Android中可以直接读写shp文件吗,是可以的.这里 ...
- 用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
- 如何在嵌套的app中运用vue去写单页面H5
本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
随机推荐
- Ogre的mesh和skeleton文件数据格式分析
转载自: http://www.cnblogs.com/topicofkevin/archive/2012/03/05/2380808.html 首先看一下skeleton文件,skeleton文件描 ...
- 如何使Label有修改功能
如何使Label有修改功能 之前制作一个项目时需要这样一个功能: 双击Label, 随后Label变为TextBox,用户修改后回车,TextBox变回Label 之前使用WPF做了一个,代码如下: ...
- 51nod1076(tarjan)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1076 题意:中文题诶- 思路:先用tarjan找出所有桥,再用 ...
- CSS之html元素与body元素的范围
- linux mysql乱码问题
mysql,发现都是乱码,一堆问号,如下图: 查看mysql编码 需要修改mysql编码,打开/etc/my.cnf 文件 在下边添加如下行 [client] default_character_se ...
- Python基础之collection
collection-系列 cellection是作为字典.元组(列表与元组可互相转换)的扩充,在此需要导入cellection 一.计数器(counter) counter是对字典类型的补充,用户获 ...
- 深度学习中GPU和显存分析
刚入门深度学习时,没有显存的概念,后来在实验中才渐渐建立了这个意识. 下面这篇文章很好的对GPU和显存总结了一番,于是我转载了过来. 作者:陈云 链接:https://zhuanlan.zhihu. ...
- 利用apache限制IP并发数和下载流量控制
一,为什么要对IP并发数,下载流量进行控制 说正题之前,先给大家讲个故事,那是在2007年,我进了一家公司,当时我们正在给达芙妮做电子商务网,www.idaphne.com.从三月份开始做的吧,九月份 ...
- JAVA本地项目手机访问
http://192.168.40.56:7082/carloan/#newOrderView ipconfig 找到本地ip,然后把localhost改成本地ip就行
- [BZOJ1047][HAOI2007]理想的正方形 二维单调队列
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1047 我们对每矩阵的一列维护一个大小为$n$的单调队列,队中元素为矩阵中元素.然后扫描每一 ...