简单效果图：

代码如下：

<!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. for循环结合range使用方法

    range概念:表示一个数据范围 基本的语法格式:range(开始数据,结束数据(不包括结束数据),步长) 记住一个公式:下一个数据=开始数据+步长 步长:表示的是数据前后的间隔 OK,基本的概念和语 ...

  2. 【剑指Offer】简单部分每日五题 - Day 1

    今天开始更新leetcode上<剑指Offer>的题解,先从简单难度开始.预计按下列顺序更新: 简单难度:每日5题 中等难度:每日3题 困难难度:每日1题 17 - 打印从1到最大的n位数 ...

  3. flask 密码加密 视频资料

    https://www.bilibili.com/video/av53870541/?p=33 通过在数据模型中定义函数来实现加密 from werkzeug.security import gene ...

  4. C++ 指针函数

    #include <stdio.h> #include <windows.h> using namespace std; template<typename T> ...

  5. webStorm -> Version Control _> Repository -> Filter By User 查看svn日志

    webStorm -> Version Control _> Repository -> Filter By User 查看svn日志

  6. python飞机大战简单实现

    小游戏飞机大战的简单代码实现: # 定义敌机类 class Enemy: def restart(self): # 重置敌机的位置和速度 self.x = random.randint(50, 400 ...

  7. pycharm 更换pip镜像源为国内，解决下载慢的问题

    参考链接:https://www.cnblogs.com/hkgov/p/7799078.html 官方源下载速度太慢,换成国内源会很快. 推荐清华的源:https://pypi.tuna.tsing ...

  8. Natas22 Writeup（header重定向、burp截取抓包）

    Natas22: 打开页面是一个空白页面,查看源码,看起来好像是需要我们在url中添加“revelio”参数即可,然而实验了之后发现浏览器跳转回了原来的页面. 再次仔细审计源码,会看到页面开头有一个重 ...

  9. 用angularjs写的一个简单的grid table

    效果图 用到的工具 1.需要先安装nodejs打开直接安装就好了 2.安装完成后使用 淘宝的源 国内速度快 安装方法 npm install -g cnpm --registry=https://re ...

  10. C++类复习及新的认识 6.1.1+6.1.2内容（适合看过一遍书的新手）

    作者水平有限,文字表述大多摘抄课本,源码部分由课本加自己改编而成,所有代码均在vs2019中编译通过 定义类操作 class Tdate { public: void Set(int m, int d ...