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 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jQuery is()函数用法3例
May 06 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
vue计算属性及使用详解
Apr 02 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
用javascript制作qq注册动态页面
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中使用反射技术的架构插件使用说明
2010/05/18 PHP
php中autoload的用法总结
2013/11/08 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
python分析网页上所有超链接的方法
2015/05/08 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python 生成图形验证码的方法示例
2018/11/11 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
读书小明星事迹材料
2014/05/03 职场文书
廉洁教育学习材料
2014/05/19 职场文书
投资意向书
2014/07/30 职场文书
信仰心得体会
2014/09/05 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
违章停车检讨书
2014/10/21 职场文书
2015年销售工作总结范文
2015/03/30 职场文书