vue实现简单的日历效果


Posted in Javascript onSeptember 24, 2020

最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回。

需求确认后,搭建了一下,在这里记录了一下,现在是简单的实现了这个需求,但是肯定的是后期需要进行修改。

vue就不多说了,在vue中使用的是原生JS

效果图(基本没有样式,很low)

vue实现简单的日历效果

现在实现的都是最初级的版本,代码里面的容错,还有一些性能上的处理,并没有书写。

不多说,上代码:

首先是vue的html结构,很简单,里面添加了一些其他时间形式的显示,可根据具体使用场景增删

<div id="dateContainer">
  <div class="date__showNowTime">
  今天是 <span v-text="ynow"></span>年<span v-text="mnow+1"></span>月<span v-text="dnow"></span>日
  </div>
  <div class="nowTime">
  <button class="preMon" @click="preMon">上个月</button>
  <div class="thisMon">
   <span v-text="ynow"></span>/
   <span v-text="mnow+1"></span>
  </div>
  <button class="nextMon" @click="nextMon">下个月</button>
  </div>
  <table border="1" id="table">
 
  </table>
 
</div>

接下来是实现我们的这个需求的JS代码的位置了,关于js的代码,在代码里面存在一些注释,具体可以根据,代码的注释进行解读

export default {
 data() {
  return {
  newDate: '',//当前的日期的信息
  ynow: '',//当前的年数
  mnow: '',//当前的月份
  dnow: '',//当前的天数
  firstDay: '',//第一天
  firstnow: '',//当前的星期
  m_days: [],//每个月的天数
  tr_str: '',//行数
  }
 },
 methods: {
  getDaysInfo() {
  var _this = this;
  this.sureDate(_this);
  },
  is_leap(year) {//判断是不是闰年
  return (year%100==0?(year%400==0?1:0):(year%4==0?1:0));
  },
  //下面的是画表格的方法,这个方法会根据数据画出我们需要的表格
  drawTable(jsonHtml) {
  var _this = this;
  var str = `
  <tr class="xiqi">
   <td class="isRed">星期日</td>
   <td>星期一</td>
   <td>星期二</td>
   <td>星期三</td>
   <td>星期四</td>
   <td>星期五</td>
   <td class="isRed">星期六</td>
  </tr>`;
  var idx = '',date_str = '',isRed = '',hasMsg='';
  for(var i = 0; i< _this.tr_str; i++) {
   str+='<tr>';
   for(var k = 0; k < 7; k++) {
 
    idx = i*7+k;
    isRed = (k===0||k===6)?"isRed":"";
    date_str=idx-_this.firstnow+1;
   (date_str<=0 || date_str>this.m_days[this.mnow]) ? date_str=" " : date_str=idx-_this.firstnow+1;
   date_str==_this.dnow?hasMsg='<td class="thisDay" date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span></td>':hasMsg='<td date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span></td>';
 
   for(var l = 0, len = jsonHtml.length; l < len; l++) {
   if(date_str== jsonHtml[l].date) {
    var newStr = '<p>'+jsonHtml[l].msg +'</p>';
    date_str==_this.dnow?hasMsg='<td class="thisDay" date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span>'+ newStr+'</td>':hasMsg='<td date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span>'+ newStr+'</td>';
 
   }
   }
   str+=hasMsg;
   }
   str+='</tr>';
  }
  var table = document.getElementById('table');
  table.innerHTML = str;
  },
  //两个参数代表的含义分别是this对象以及判断当前的操作是不是在进行月份的修改
  sureDate(_this,other) {
  this.newDate = new Date();
  this.ynow = this.newDate.getFullYear();
  if(!other) {
   this.mnow=this.newDate.getMonth(); //月份
  }
  this.dnow=this.newDate.getDate(); //今日日期
  this.firstDay = new Date(this.ynow,this.mnow,1);
  this.firstnow=this.firstDay.getDay();
  this.m_days = [31,28+this.is_leap(this.ynow),31,30,31,30,31,31,30,31,30,31];
  this.tr_str = Math.ceil((_this.m_days[this.mnow] + this.firstnow)/7);
  this.showMsg();
  },
  preMon() {
  var _this = this;
  this.mnow--;
  this.sureDate(_this,"up");
  },
  nextMon() {
  var _this = this;
  this.mnow++;
  this.sureDate(_this,"next");
  },
  //通过接口返回的是我们当前的月份对应在日历中需要处理的事项
  showMsg() {
  var jsonHtml = [{
   date: 2,
   msg: '吃饭'
  },
  {
   date: 3,
   msg: '睡觉'
  },
  {
   date: 4,
   msg: '打豆豆'
  },
  {
   date: 6,
   msg: '豆豆不在家'
  },
  {
   date: 12,
   msg: '~~~~~'
  },
  {
   date: 15,
   msg: '怎么办~~~~'
  },
  {
   date: 20,
   msg: '找豆豆'
  }];
  this.drawTable(jsonHtml)
  }
 
 },
 mounted() {
  //画出当前的月份的天数对应的表格
  this.getDaysInfo();
  //进行数据的获取,显示到对应的位置
 }

js的代码目前的来说也就是这么多,里面只是初步实现了功能,其他什么都没进行处理~~~~

具体的实现可以访问我的github获取--点击打开链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
vue实现记事本功能
Jun 26 #Javascript
ES6 Set结构的应用实例分析
Jun 26 #Javascript
vue.js实现备忘录demo
Jun 26 #Javascript
ES6 Map结构的应用实例分析
Jun 26 #Javascript
vue实现日历备忘录功能
Sep 24 #Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 #Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
You might like
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php文件系统处理方法小结
2016/05/23 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JS判定是否原生方法
2013/07/22 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python Deque 模块使用详解
2014/07/04 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python之生成多层json结构的实现
2020/02/27 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
如何利用python生成MD5并去重
2020/12/07 Python
python中str内置函数用法总结
2020/12/27 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
美国知名艺术画网站:Art.com
2017/02/09 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
String和StringBuffer的区别
2015/08/13 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
工艺工程师工作职责
2013/11/23 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书