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 = 0let now = new Date()let global_month = now.getMonth() + 1let 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() + 1let year = now.getFullYear()//得到每个月多少天switch (month) {case 1:case 3:case 5:case 7:case 8:case 10:case 12:allDays = 31break;case 4:case 6:case 9:case 11:allDays = 30break;default://判断闰年 得到二月份的天数if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {allDays = 29} else {allDays = 28}break;}//获取当前月份有多少天 生成相应个数的lifor (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实现简单日历相关推荐

php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
JQuery ZTree简单使用
JQuery ZTree简单使用 @(JavaScript)[jQuery, ztree, 入门] JQuery ZTree简单使用基本概述案例使用标准json数据构造ztree 使用简单jso ...
jquery练习——简单的图片结果展示效果
今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...
翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
php 页面异步刷新,php+jQuery+Ajax简单实现页面异步刷新
php+jQuery+Ajax简单实现页面异步刷新这里有新鲜出炉的 jQuery 示例,程序狗速度看过来! jQuery javascript 框架 jQuery 是一个兼容多浏览器的 javasc ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...

jQuery实现简单日历

jQuery实现简单日历相关推荐

最新文章

热门文章