简单效果图：

代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
 
td{
 
border:1px solid;
}
 
button{
 
margin: 5px;
}
 
</style>
<script src="./jquery-3.2.1.min.js"></script>
<script>
 
window.onload = function(){
 
//获取td集合
var cells = document.getElementById('monitor').getElementsByTagName('td');
//td集合长度7
var clen = cells.length;
var currentFirstDate;
var formatDate = function(date){
 
var year = date.getFullYear()+'年';
var month = (date.getMonth()+1)+'月';
//获取1~31日
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(){
// console.log(132)
setDate(addDate(currentFirstDate,7));
};
document.getElementById('lz').onclick = function(){
console.log(132);
};
setDate(new Date());
}
</script>
<script>
$(function(){
$("#lz").click(function(){
console.log("nmb");
console.log($(this).html());
})
})
</script>
</head>
<body>
<button id="last-week">上一周</button><button id="next-week">下一周</button>
<table id="monitor">
<tr>
<td id="lz"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

jq日历一周为单位轮播的更多相关文章

  1. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  2. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  3. 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  4. JQ轮播

    首先是html结构,一个简单的轮播,主要分为三大层:div>ul>li,li里面的img图片. 其次,css样式:div固定住宽高,overflow:hidden:ul的宽度建议是动态获取 ...

  5. jq实现图片轮播:圆形焦点+左右控制+自动轮播

    来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  6. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  7. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  8. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

  9. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. vue-cli脚手架目录（2.0）

    vue-cli脚手架目录一览   最近在学习vue,看的稀里糊涂.今天从头开始,把cli配置的vue项目目录和配置文件搞清楚. 先看看整个项目目录结构: 再看看build文件夹下相关文件及目录: co ...

  2. C# BASS音频库 + 频谱基本用法

    效果图: 使用了 BASS.dll.  BASS.NET.dll   和  PeakMeterCtrl.dll 前面两个负责播放   最后一个负责绘制频谱,本文重点讲的是频谱部分,播放音频部分注意一点 ...

  3. 鼠年开元用逐浪CMS v8.13版-NoSQL安装更轻便

    作为国内领先的Zoomla!逐浪CMS,一直以来深受人道的除了其功能强大.性能稳定外,易用性也是其突出的现. 自Zoomla!逐浪CMS 8.x开始,官方在其程序包中,集成了一键安装进程,从而大大提升 ...

  4. SSL/TLS 协议运行机制概述（一）

    SSL/TLS 协议运行机制概述(一) SSL/TLS 发展史 1994年,NetScape 设计了SSL协议(Secure Sockets Layer) 1.0,未正式发布 1995年,NetSca ...

  5. 有关KMP算法

    KMP算法: 此算法的本质是首先对于模板字符串进行计算,生成一个数组(next数组),该数组反映了模板字符串的情况. 例: S: ABADACABABCD P: ABAB 当我们查询到P3与S3(B和 ...

  6. 【Weiss】【第04章】AVL树例程

    普通的二叉搜索树可能会由于数据不平均.删除产生高度差等原因,使树倾向于不平衡生长,导致操作慢于O(NlogN). 为应对此现象,将搜索.删除.插入的最坏时间也控制在O(NlogN)上,产生了平衡二叉树 ...

  7. 小白学 Python 数据分析（18）：Matplotlib（三）常用图表（上）

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  8. Unity 游戏框架：UI 管理神器 UI Kit

    UI Kit 快速入门 首先我们来进行 UI Kit 的快速入门 制作一个界面的,步骤如下: 准备 生成代码 逻辑编写 运行 1. 准备 先创建一个场景 TestUIHomePanel. 删除 Hie ...

  9. P1969 积木大赛 题解

    原题链接 简要题意: 每次把一段区间 \(+1\),问得到 \(a\) 数组的最小次数. 我们可以把 \(+1\) 得到 \(a\) 换成,从 \(a\) 依次 \(-1\) 得到 \(0\). 算法 ...

  10. 动态规划-计数dp-Distinct Subsequences II

    2020-02-06 17:01:36 问题描述: 问题求解: 非常经典的计数dp问题,思路就是统计以每个字符为结尾的个数,最后求和即可. dp[i] = sum of (dp[j]) 0 <= ...