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插件imgAreaSelect基础讲解
May 26 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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
php下使用无限生命期Session的方法
2007/03/16 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP curl使用实例
2015/07/02 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python探索之创建二叉树
2017/10/25 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
毕业生教师求职信
2013/10/20 职场文书
教师节促销方案
2014/03/22 职场文书
体育之星事迹材料
2014/05/11 职场文书
员工生日会策划方案
2014/06/14 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
义诊活动总结
2015/02/04 职场文书
骨干教师个人总结
2015/02/11 职场文书
个人年终总结范文
2015/03/09 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python