gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jquery实现简单每周轮换的日历由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

先放出一张示例图 。

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

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

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

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

HTML 。

  1. <div id="app">
  2. <div class="title"></div>
  3. <div class="left"><</div>
  4. <ul>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. <li></li>
  10. <li></li>
  11. <li></li>
  12. </ul>
  13. <div class="right">></div>
  14. </div>

CSS 。

  1. <style>
  2. #app {
  3. width: 400px;
  4. height: 50px;
  5. margin: 200px auto;
  6. position: relative;
  7. color: darkgray;
  8. }
  9. .title {
  10. position: absolute;
  11. top: -50px;
  12. left: 0;
  13. width: 200px;
  14. height: 50px;
  15. }
  16. ul {
  17. list-style: none;
  18. background-color: blanchedalmond;
  19. width: 100%;
  20. display: block;
  21. padding: 0;
  22. }
  23. ul li {
  24. display: inline-block;
  25. width: 50px;
  26. height: 50px;
  27. text-align: center;
  28. line-height: 50px;
  29. cursor: pointer;
  30. }
  31. .left {
  32. position: absolute;
  33. top: 0;
  34. left: -50px;
  35. font-size: 35px;
  36. cursor: pointer;
  37. }
  38. .right {
  39. position: absolute;
  40. top: 0;
  41. right: -50px;
  42. font-size: 35px;
  43. cursor: pointer;
  44. }
  45. .on {
  46. color: darkorange;
  47. }
  48. </style>

JS 。

  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. <script>
  3. let now = new Date()
  4. let oneDay = 1000*60*60*24 // 一天的时间
  5. let timeArr = [] // 用来存储每次循环真正时间戳的数组
  6. let onDate = now.getTime() // 当前激活的日期(有且仅有一个)
  7. init()
  8. // 点击后添加激活样式
  9. $('ul li').on('click', function() {
  10. acton($(this).index())
  11. })
  12. $('.left').on('click', function() {
  13. changeUl(0)
  14. })
  15. $('.right').on('click', function() {
  16. changeUl(1)
  17. })
  18.  
  19. function init() {
  20. // 计算初始化时的周一和周天
  21. let monday = now.getTime() - (now.getDay() - 1)*oneDay
  22. let sunday = now.getTime() + (7 - now.getDay())*oneDay
  23. // 循环渲染本周
  24. for(let i = 0;i < 7;i++) {
  25. let nowDate = monday + oneDay * i
  26. $('ul li').eq(i).text(new Date(nowDate).getDate())
  27. timeArr.push(nowDate)
  28. if (nowDate === now.getTime()) { // 初始化时渲染标签并激活当前本地日期和显示
  29. acton(i)
  30. }
  31. }
  32. }
  33.  
  34. // 判断数组中是否存在该日期并激活
  35. function judon() {
  36. if (timeArr.indexOf(onDate) !== -1) {
  37. $('ul li').eq(timeArr.indexOf(onDate)).addClass('on').siblings().removeClass('on')
  38. } else {
  39. $('ul li').each(function() {
  40. $(this).removeClass('on')
  41. })
  42. }
  43. }
  44.  
  45. // 点击前后实现更换每周内容,1是前进一周,0是后退一周
  46. function changeUl(type) {
  47. for (let n = 0;n < 7;n++) {
  48. timeArr[n] = type ? timeArr[n] + oneDay*7 : timeArr[n] - oneDay*7
  49. $('ul li').eq(n).text(new Date(timeArr[n]).getDate())
  50. }
  51. judon()
  52. }
  53.  
  54. // 激活日期并显示
  55. function acton(i) {
  56. let nowTitle = new Date(timeArr[i]);
  57. $('ul li').eq(i).addClass('on').siblings().removeClass('on');
  58. $('.title').text(`${nowTitle.getFullYear()}年${nowTitle.getMonth()+1}月${nowTitle.getDate()}日`);
  59. onDate = timeArr[i]
  60. }
  61. </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

原文链接:https://blog.csdn.net/YangChaoYue1221/article/details/108462078 。

最后此篇关于jquery实现简单每周轮换的日历的文章就讲到这里了,如果你想了解更多关于jquery实现简单每周轮换的日历的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com