用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文件描 ...
- 51nod1562(set&模拟)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1562 题意:中文题诶- 思路:直接用set模拟 set< ...
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 创建Cookie
Tomcat作为Web服务器,对Cookie提供了良好的支持.那么,运行在Tomcat的Servlet该如何访问Cookie呢?幸运的是,Servlet无需直接和HTTP请求或响应中的原始Cookie ...
- tpc-ds99 工具使用
安装部署 tpc-ds-99 工具 解压文件 unzip tpc-ds-tool.zip 进入目录 cd v2.3.0/tools 拷贝Makefile文件 cp Makefile.suite Mak ...
- 网络装机pxe服务器的配置过程
网络装机pxe服务器的配置过程 背景: 针对于Linux运维工作中遇到的需要大批量安装Linux系统的情况,通过网络装机的方式实现无人值守安装Linux操作系统,现需要配置一台pxe服务器用于pxe批 ...
- android videoView 加载等待
final Handler handler = new Handler(); Runnable runnable = new Runnable() { public void run() { int ...
- Jquery | 外部插入节点
after(content) : //在 span 元素外部的后面 插入 "<span><b>Write Less Do More</b><span ...
- queue模块
queue队列 :使用import queue,用法与进程Queue一样 queue is especially useful in threaded programming when informa ...
- 17999 Light-bot 模拟 + kmp求循环节
http://acm.scau.edu.cn:8000/uoj/mainMenu.html 17999 Light-bot 时间限制:1000MS 内存限制:65535K 提交次数:0 通过次数:0 ...
- [转]Creating Mailing Labels in SQL Server Reporting Services （rdlc 数据1页 2竖排 显示）
本文转自:http://blogs.wrox.com/article/creating-mailing-labels-in-sql-server-reporting-services/ Most wo ...