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 相关文章推荐
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
详解参数传递四种形式
Jul 21 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
原生js无缝轮播插件使用详解
Mar 09 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-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python读取表格类型文件代码实例
2020/02/17 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
质量在我心中演讲稿
2014/09/02 职场文书
学校社团活动总结
2015/05/07 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL