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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
PHP5 安装方法
2007/01/15 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
一端时间轮换的广告
2006/06/26 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
用python实现对比两张图片的不同
2018/02/05 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python生成随机红包的实例写法
2019/09/02 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
教学质量评估实施方案
2014/03/17 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
孩子教育的心得体会
2014/09/01 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
晚会开幕词范文
2016/03/04 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫