js获取当前周、上一周、下一周日期


Posted in Javascript onMarch 19, 2017

效果图:

js获取当前周、上一周、下一周日期

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>日历操作</title>
  <script>
    window.onload = function(){     
      var cells = document.getElementById('monitor').getElementsByTagName('td');
      var clen = cells.length;
      var currentFirstDate;
      var formatDate = function(date){       
        var year = date.getFullYear()+'年';
        var month = (date.getMonth()+1)+'月';
        var day = date.getDate()+'日';
        var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')'; 

        return year+month+day+' '+week;
      };
      var addDate= function(date,n){    
        date.setDate(date.getDate()+n);    
        return date;
      };
      var setDate = function(date){       
        var week = date.getDay()-1;
        date = addDate(date,week*-1);
        currentFirstDate = new Date(date);

        for(var i = 0;i<clen;i++){         
          cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1));
        }        
      };       
      document.getElementById('last-week').onclick = function(){
        setDate(addDate(currentFirstDate,-7));     
      };       
      document.getElementById('next-week').onclick = function(){         
        setDate(addDate(currentFirstDate,7));
      };   
      setDate(new Date());
    }
  </script>
</head>
<body>
  <button id="last-week">上一周</button><button id="next-week">下一周</button>
  <table id="monitor">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
浅析bootstrap原理及优缺点
Mar 19 #Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 #Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 #Javascript
JavaScript数据结构之链表的实现
Mar 19 #Javascript
用jQuery实现圆点图片轮播效果
Mar 19 #Javascript
Bootstrap 网格系统布局详解
Mar 19 #Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Python ljust rjust center输出
2008/09/06 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
Python如何输出百分比
2020/07/31 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
秋季运动会活动方案
2014/02/05 职场文书
装饰活动策划方案
2014/02/11 职场文书
代理协议书
2014/04/22 职场文书
招股说明书范本
2014/05/06 职场文书
小学语文业务学习材料
2014/06/02 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
英语复习计划
2015/01/19 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书