用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语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
随机推荐
- 3DMAX 3场景制作
1 模型制作 2 UVW贴图展开 1 打开材质编辑器,给模型一个材质(以后应该以这个材质生成uvw展开,进而生成贴图,贴图绘制完毕后,再贴回这个材质中,就完成了给模型加贴图的操作) 2 在编辑面板中添 ...
- Splay（区间翻转） 模板
洛谷:P3391 [模板]文艺平衡树(Splay) #include<cstdio> #include<iostream> #include<algorithm> ...
- maven - 安装目录详解
从 Apache Maven 官网下载 Maven 的安装包并解压之后,进入安装目录,我们会看到如下内容: 接下来我们分别解读目录的内容及其功能 bin 包含了mvn运行的脚本,在命令行输入任意一条m ...
- 受保护的封装 protected
补充内容:封装 私有化封装 private受保护的封装 protected公共的封装 public 注意:python目前不支持设定受保护的成员,但是开发者由约定的使用方式 受保护的封装:在成员名称前 ...
- 了解cookie
1.cookie数据会自动在Web浏览器和Web服务器之间传输的,因此服务端脚本就可以读,写存储在客户端的cookie值. 2.在javascript中使用cookie不会采用任何加密机制,因此是不安 ...
- 后台管理系统·快速开发框架JSite
平台介绍 框架基于Maven构建,拆分成多个子模块,层次结构清晰.可用于所有Web应用,如企业后台管理系统.OA系统.CMS.CRM等. 框架本身集成了最新的 Flowable工作流引擎 https: ...
- with rollup
实验吧的一道ctf题,这两天无聊,做做ctf题.在实验吧被一道也题卡了好久. 页面很简单就是一个登陆页面,按照之前的经验觉得应该是注入吧.再看题猜测应该是绕waf之类的. 查看页面源码找到了提供的源代 ...
- python入门之装饰器
入门原理: 一系列函数要做相同的修改,在这些函数执行之前做的操作,或者在执行之后做的操作都可以在一个装饰器(函数)里修改 作用: 在不改变原函数的情况下,对原函数的操作前或者操作后做些改变,这就是装饰 ...
- bootstrap输入框组、导航和导航条
输入框组(input groups) 避免使用select 支持不好,使用输入框组 尺寸根据 input-group-lg input-group-sm来选择 <div class ...
- HTTP/1.1 持久连接 persistent connection
首先:HTTP的长连接和短连接本质上是TCP长连接和短连接. 1. 在HTTP1.0中,默认的是短连接,没有正式规定 Connection:Keep-alive 操作:在HTTP1.1中所有连接都是K ...