一个基于jquery的周日历，简单易懂

周日历

一个基于jquey跟moment的周日历?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>日历</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script></head>
<body><div class="header"></div><div><table><thead class="thead"></thead><tbody class="tbody"></tbody></table></div><script>var jia = 0;function week(date){var zhou = moment(date).format('dddd');var num = 0;if(zhou == 'Monday'){num = 0}else if(zhou == 'Tuesday'){num = -6}else if(zhou == 'Wednesday'){num = -5}else if(zhou == 'Thursday'){num =-4}else if(zhou == 'Friday'){num = -3}else if(zhou == 'Saturday'){num = -2}else if(zhou == 'Sunday'){num = -1}var number1 = moment((new Date(date).getTime())-(num*24*60*60*1000)).format('YYYY-MM-DD');var last_monday = moment(number1).subtract('days',7).format('YYYY/MM/DD');//周一日期var last_monday1 = moment(number1).subtract('days',6).format('YYYY/MM/DD');//周二日期var last_monday2 = moment(number1).subtract('days',5).format('YYYY/MM/DD');//周三日期var last_monday3 = moment(number1).subtract('days',4).format('YYYY/MM/DD');//周四日期var last_monday4 = moment(number1).subtract('days',3).format('YYYY/MM/DD');//周五日期var last_monday5 = moment(number1).subtract('days',2).format('YYYY/MM/DD');//周六日期var last_sunday = moment(number1).subtract('days',1).format('YYYY/MM/DD');//周日日期$('.header').html('<h5><b οnclick="nextAge()">上一周</b><b id="b">'+last_monday+'-'+last_sunday+'</b><b οnclick="nextNew()">下一周</b></h5>')var tr = '<tr><th>姓名</th><th>星期一'+last_monday+'</th><th>星期二'+last_monday1+'</th><th>星期三'+last_monday2+'</th><th>星期四'+last_monday3+'</th><th>星期五'+last_monday4+'</th><th>星期六'+last_monday5+'</th><th>星期日'+last_sunday+'</th></tr>'$('.thead').append(tr)var tr1 = '<tr><td>张三</td><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td><td>内容六</td><td>内容七</td></tr>'$('.tbody').append(tr1);}week(moment(new Date().getTime()).format('YYYY-MM-DD'));function nextAge(){jia = jia-1;$('.header').html('');$('.thead').html('');$('.tbody').html('');week(moment((new Date().getTime())+(jia*7*24*60*60*1000)).format('YYYY-MM-DD'));}function nextNew(){jia++;$('.header').html('');$('.thead').html('');$('.tbody').html('');week(moment((new Date().getTime())+(jia*7*24*60*60*1000)).format('YYYY-MM-DD'));}</script>
</body>
</html>

复制可以直接看效果

没写样式，凑合看吧

一个基于jquery的周日历，简单易懂相关推荐

一个基于JQuery的日历时间控件
http://jqueryui.com/demos/datepicker/ 转载于:https://www.cnblogs.com/wangpei/archive/2011/07/09/2101888 ...
分享一个基于jQuery，backbone.js和underscore.js的消息提示框架 - Backbone.Notifier
在线演示本地下载我们曾今在以前的文章中介绍过jQuery的警告和提示框插件,今天这里我们介绍一个开源的消息提示框架 Backbone.Notifier,目前版本为version0.1.使用这个框 ...
实现一个基于jQuery的图片轮播效果（带自动播放）
data.json {"data": [{"title": "西游题材小游戏合辑","subtitle": " ...
一个flash鼠标效果，代码简单易懂
var posYoubiao:Array = new Array(); posYoubiao[0] = 5; for (i=1; i [img]/Files/BeyondPic/2006-12/4 ...
基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
基于jQuery/zepto的单页应用(SPA)搭建方案
这里介绍一个基于jquery或zepto的单页面应用方案,遵循尽可能简单的原则,使大家一目了然,只需配置一个路由,之后完全按照jq日常写法即可完成.可做学习使用,也可修改后用于一些业务逻辑简单的spa ...

一个基于jquery的周日历，简单易懂

一个基于jquery的周日历，简单易懂相关推荐

最新文章

热门文章