jquery实现简单每周轮换的日历


Posted in jQuery onSeptember 10, 2020

本文实例为大家分享了jquery实现简单每周轮换日历的具体代码,供大家参考,具体内容如下

先放出一张示例图

jquery实现简单每周轮换的日历

在进入页面时自动获取本地时间并激活(示例为2020年9月8日),再点击左按钮时倒退一周,右按钮前进一周。鼠标点击其中li标签时激活并在上方日期显示。

jquery实现简单每周轮换的日历

一个很简单的小日历,主要是项目中经常会使用到就单独拿出来写个demo。具体思路是,获取当前本地日期并推断出周一和周日进而获得本周全部的日期,真正存放的是一个长度为7的时间戳数组,只是显示的是日期,因为我认为利用时间戳做大部分处理比较直接简单。如果有更好思路的小伙伴欢迎批评。下面放出代码。

HTML

<div id="app">
 <div class="title"></div>
 <div class="left"><</div>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 <div class="right">></div>
</div>

CSS

<style>
 #app {
  width: 400px;
  height: 50px;
  margin: 200px auto;
  position: relative;
  color: darkgray;
 }
 .title {
  position: absolute;
  top: -50px;
  left: 0;
  width: 200px;
  height: 50px;
 }
 ul {
  list-style: none;
  background-color: blanchedalmond;
  width: 100%;
  display: block;
  padding: 0;
 }
 ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
 }
 .left {
  position: absolute;
  top: 0;
  left: -50px;
  font-size: 35px;
  cursor: pointer;
 }
 .right {
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 35px;
  cursor: pointer;
 }
 .on {
  color: darkorange;
 }
</style>

JS

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script>
 let now = new Date()
 let oneDay = 1000*60*60*24 // 一天的时间
 let timeArr = [] // 用来存储每次循环真正时间戳的数组
 let onDate = now.getTime() // 当前激活的日期(有且仅有一个)
 init()
 // 点击后添加激活样式
 $('ul li').on('click', function() {
  acton($(this).index())
 })
 $('.left').on('click', function() {
  changeUl(0)
 })
 $('.right').on('click', function() {
  changeUl(1)
 })

 function init() {
  // 计算初始化时的周一和周天
  let monday = now.getTime() - (now.getDay() - 1)*oneDay
  let sunday = now.getTime() + (7 - now.getDay())*oneDay
  // 循环渲染本周
  for(let i = 0;i < 7;i++) {
  let nowDate = monday + oneDay * i
  $('ul li').eq(i).text(new Date(nowDate).getDate())
  timeArr.push(nowDate)
  if (nowDate === now.getTime()) { // 初始化时渲染标签并激活当前本地日期和显示
   acton(i)
  }
  }
 }
 
 // 判断数组中是否存在该日期并激活
 function judon() {
  if (timeArr.indexOf(onDate) !== -1) {
  $('ul li').eq(timeArr.indexOf(onDate)).addClass('on').siblings().removeClass('on')
  } else {
  $('ul li').each(function() {
   $(this).removeClass('on')
  })
  }
 }

 // 点击前后实现更换每周内容,1是前进一周,0是后退一周
 function changeUl(type) {
  for (let n = 0;n < 7;n++) {
  timeArr[n] = type ? timeArr[n] + oneDay*7 : timeArr[n] - oneDay*7
  $('ul li').eq(n).text(new Date(timeArr[n]).getDate())
  }
  judon()
 }
 
 // 激活日期并显示
 function acton(i) {
  let nowTitle = new Date(timeArr[i]);
  $('ul li').eq(i).addClass('on').siblings().removeClass('on');
  $('.title').text(`${nowTitle.getFullYear()}年${nowTitle.getMonth()+1}月${nowTitle.getDate()}日`);
  onDate = timeArr[i]
 }
</script>

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

jQuery 相关文章推荐
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
jQuery实现简单三级联动效果
Sep 05 #jQuery
如何基于jQuery实现五角星评分
Sep 02 #jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
You might like
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python实现发送QQ邮件的封装
2017/07/14 Python
python实现人脸识别代码
2017/11/08 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
大学专科生推荐信范文
2013/11/23 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
上课说话检讨书500字
2014/11/01 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
复兴之路展览观后感
2015/06/02 职场文书