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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery+ajax实现文件上传功能
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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python素数筛选法浅析
2018/03/19 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python批量处理txt文件的实例代码
2020/01/13 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
寄语十八大感言
2014/02/07 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang