简单效果图：

代码如下：

<!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. unzip详解，Linux系统如何解压缩zip文件？

    通常在使用linux时会自带了unzip,但是在最小化安装之后,可能系统里就无法使用此命令了. yum list unzip 查看是否安装 如果没安装过就继续 yum install unzip 安装 ...

  2. Redux 架构理解

    Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...

  3. 【春招】 java static 执行顺序

    package static类型.执行顺序; public class Test { Person person = new Person("Test"); static{ Sys ...

  4. scrapydweb的初步使用（管理分布式爬虫）

    https://github.com/my8100/files/blob/master/scrapydweb/README_CN.md 一.安装配置 1.请先确保所有主机都已经安装和启动 Scrapy ...

  5. [CSP初赛] 组合数学的三个技巧以及从另一方面思考组合类问题

    也不知道老师讲不讲 话说好久没有水博客了,看了一点\(python\)然后就去搞文化课了 正好网课讲到组合数学,然后觉得还蛮难的(其实是我变菜了),就想到了以前的\(csp\)的组合数学基础 果然被我 ...

  6. Google Sign In

    我们平常也经常使用QQ,微信账号,登录其他应用.最近公司让我给网站添加一个谷歌账号登录.我来这里记录一下,莫怪~~~莫怪~~~ 1. 申请一个账号登录ID:  https://developers.g ...

  7. Html的总结(待完善)

    Html的总结(待完善) 框内文字 Placeholder 框内文字(例如:请输入密码) A标签 link 未点击的A标记 visited 点击过的A标签 hover 放置鼠标变颜色 active 点 ...

  8. mysql & Tomcat使用问题记录

    mysql使用问题记录 1.mysql如何修改root密码 a.进入mysql安装目录b.登录 mysql -u root -pc.修改密码 mysql> SET PASSWORD FOR ro ...

  9. A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesenchymal Stem Cells （解读人：王欣然）

    文献名:A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesen ...

  10. 带修主席树 洛谷2617 支持单点更新以及区间kth大查询

    题目链接:https://www.luogu.com.cn/problem/P2617 参考博客:https://blog.csdn.net/dreaming__ldx/article/details ...