用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语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
随机推荐
- C++中的声明与定义
转自:http://www.cnblogs.com/kingcat/archive/2011/12/30/2307426.html C++是一种复杂的计算机语言,很多在现代高级语言中已经不需要程序员操 ...
- hdu1536(sg函数)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1536 题意:首先输入K 表示一个集合的大小 之后输入集合 表示对于这对石子只能去这个集合中的元素的个 ...
- mysql之SQL入门与提升（四）——终结篇，函数
一.SQL Aggregate (聚合)函数 SQL Aggregate 函数计算从列中取得的值,返回一个单一的值. AVG() - 返回平均值 COUNT() - 返回行数 FIRST() - 返回 ...
- python快排
代码: def partition(data,left,right): tmp = data[left] while left<right: while left < right and ...
- 自定义的cell上面有图片时，如果产生了重用，图片可能会错乱问题
当被重用的cell将要显示时,会调用这个方法,这个方法最大的用武之地是当你自定义的cell上面有图片时,如果产生了重用,图片可能会错乱(当图片来自异步下载时及其明显),这时我们可以重写这个方法把内容抹 ...
- 【bzoj3033】太鼓达人
3033: 太鼓达人 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 521 Solved: 399[Submit][Status][Discuss] ...
- Shortest Path Codeforces - 59E || 洛谷P1811 最短路_NOI导刊2011提高（01）
https://codeforces.com/contest/59/problem/E 原来以为不会..看了题解发现貌似自己其实是会的? 就是拆点最短路..拆成n^2个点,每个点用(i,j)表示,表示 ...
- python学习之结构语句
一 循环语句: 1.1 for x in rang(n) :#rang(n)生成左闭右开区间的序列 1.2 while x 条件n: 二条件语句: if 条件表达式: elif 表达式: elif 表 ...
- game 竞赛图 缩环
[问题背景] zhx 和他的妹子(们)做游戏. [问题描述] 考虑 N 个人玩一个游戏, 任意两个人之间进行一场游戏 (共 N*(N-)/ 场) , 且每场一定能分出胜负. 现在,你需要在其中找到三个 ...
- Spring使用_进阶
概述 本文主要写了几个关于Spring Aware,多线程,计划任务(定时任务),条件注解,组合注解,元注解,Spring测试的小例子以及关于@Enable*注解的工作原理的理解. Spring Aw ...