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 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js 获取时间间隔实现代码
May 12 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
浅析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中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
ExtJS 入门
2010/10/29 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python中文乱码的解决方法
2013/11/04 Python
python简单判断序列是否为空的方法
2015/06/30 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
浅谈python数据类型及类型转换
2017/12/18 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python OS模块实例详解
2019/04/15 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
文明市民先进事迹
2014/05/15 职场文书
爱护草坪标语
2014/06/24 职场文书
个人委托书范本汇总
2014/10/01 职场文书
英语辞职信范文
2015/02/28 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android