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 手动给表增加数据的小例子
Jul 10 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
如何用threejs实现实时多边形折射
May 07 Javascript
Vue+Flask实现图片传输功能
Apr 01 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Python3如何解决字符编码问题详解
2017/04/23 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
学习型党组织建设经验材料
2014/05/26 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
委托证明书
2014/09/17 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python