jQuery实现简单日历效果


Posted in jQuery onJuly 05, 2020

本文实例为大家分享了jQuery实现简单日历效果的具体代码,供大家参考,具体内容如下

日历效果如下图:

jQuery实现简单日历效果

css部分:

<style>
  * {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .main {
   width: 380px;
   height: 370px;
   margin: 30px auto;
   position: relative;
  }

  button {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: pink;
   font-size: 12px;
   text-align: center;
   line-height: 30px;
   border: none;
   position: absolute;
   color: #fff;
   outline: none;
   cursor: pointer;
   user-select: none;
  }

  .prev {
   top: 10px;
   left: 6%;
  }

  .next {
   top: 10px;
   right: 6%;
  }

  .nowTime {
   width: 90px;
   position: absolute;
   top: 15px;
   right: calc(50% - 45px);
   font-size: 14px;
   font-weight: bold;
   background: linear-gradient(to right, rgb(247, 149, 190), rgb(248, 204, 228));
   -webkit-background-clip: text;
   color: transparent;
  }

  .container {
   width: 350px;
   margin: 50px auto;
   border: 1px solid #ccc;
   position: absolute;
   top: calc(50% - 190px);
   left: calc(50% - 175px);

  }

  .container ul:first-of-type {
   background: rgb(245, 195, 195);
   color: rgb(43, 40, 40);
  }

  .container ul {
   width: 350px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   text-align: center;
  }

  .container li {
   width: 50px;
   height: 50px;
   text-align: center;
   line-height: 50px;
   cursor: pointer;
  }

  .container li:not(.disabled):hover {
   background: rgb(255, 174, 208);
  }

  li.disabled {
   background: rgb(252, 238, 238);
   cursor: not-allowed;
   color: rgb(206, 206, 206);
  }

  li.active {
   background: rgb(255, 206, 214);
  }
</style>

html部分:

<div class="main">
  <button class="prev">上月</button>
  <p class="nowTime"></p>
  <button class="next">下月</button>
  <div class="container">
   <ul>
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
   </ul>
   <ul class="content">

   </ul>
  </div>
</div>

js部分:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
  $(function () {
   let allDays = 0
   let now = new Date()
   let global_month = now.getMonth() + 1
   let global_year = now.getFullYear()
   let today = now.getDate()

   $('.prev').click(function () {
    now.setMonth(now.getMonth() - 1)
    calendar()
   })
   $('.next').click(function () {
    now.setMonth(now.getMonth() + 1)
    calendar()
   })

   function calendar() {
    $('.content').empty()
    let month = now.getMonth() + 1
    let year = now.getFullYear()

    //得到每个月多少天
    switch (month) {
     case 1:
     case 3:
     case 5:
     case 7:
     case 8:
     case 10:
     case 12:
      allDays = 31
      break;
     case 4:
     case 6:
     case 9:
     case 11:
      allDays = 30
      break;
     default:
      //判断闰年 得到二月份的天数
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
       allDays = 29
      } else {
       allDays = 28
      }

      break;
    }
    //获取当前月份有多少天 生成相应个数的li
    for (let i = 1; i <= allDays; i++) {
     let li = $('<li/>').text(i)
     //给对应今天的li添加高亮效果
     if (i === today && year === global_year && month === global_month) li.addClass('active')
     $('.content').append(li)
    }

    //思路:每个月一号前面空几个 空的个数为周几就空几个
    now.setDate(1) //将时间设置成本月的一号
    let firstDay = now.getDay() // 获取一号是周几
    for (let i = 0; i < firstDay; i++) { // 循环次数为对应的是周几
     now.setDate(now.getDate() - 1) //每循环一次 日期往前倒一天
     let li = $('<li/>').text(now.getDate()).addClass('disabled') //生成相对应的空格
     $('.content').prepend(li)
    }
    now.setDate(now.getDate() + firstDay) //将时间设置回当前时间 否则影响后面时间的获取
    now.setDate(allDays)
    //思路:每个月最后一天后面空几个 空的个数为6减周几就空几个
    now.setDate(allDays) //将时间设置成每月最后一天
    let lastDay = 6 - now.getDay() //最后空的个数
    for (let i = 0; i < lastDay; i++) {
     now.setDate(now.getDate() + 1) //每循环一次 日期往后加一天
     let li = $('<li/>').text(now.getDate()).addClass('disabled') //生成相对应的空格
     $('.content').append(li)
    }
    now.setDate(now.getDate() - lastDay) //将时间设置回当前时间 否则影响后面时间的获取
    now.setDate(1)

    $('.nowTime').html(now.getFullYear() + '年' + (now.getMonth() + 1) + '月')
   }

   calendar()
  })
</script>

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

jQuery 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
jquery实现上传图片功能
Jun 29 #jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
You might like
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
js登录弹出层特效
2014/03/07 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JS的数组迭代方法
2015/02/05 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python使用tornado实现简单爬虫
2018/07/28 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
户外婚礼策划方案
2014/02/08 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
伏羲庙导游词
2015/02/09 职场文书
军训个人总结
2015/03/03 职场文书
公司表扬稿范文
2015/05/05 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
python 中的@运算符使用
2021/05/26 Python