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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python实现定时播放mp3
2015/03/29 Python
python避免死锁方法实例分析
2015/06/04 Python
Python实现文件复制删除
2016/04/19 Python
tornado 多进程模式解析
2018/01/15 Python
django中静态文件配置static的方法
2018/05/20 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
如何通过Python实现标签云算法
2019/07/02 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python super的使用方法及实例详解
2019/09/25 Python
python绘制随机网络图形示例
2019/11/21 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
python中selenium库的基本使用详解
2020/07/31 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
高二化学教学反思
2014/01/30 职场文书
大学新闻系求职信
2014/06/03 职场文书
检讨书模板
2015/01/29 职场文书
未婚证明范本
2015/06/15 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书