简单效果图：

代码如下：

<!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. Linux apache让网页编码错误

    今天帮一个小伙伴搞作业,遇到安装discuz乱码问题,就顺便在这里写一下,以供其他同学纠正. 开apache配置文件/etc/httpd/conf/httpd.conf 查找AddDefaultCha ...

  2. flask 模型一对多个人理解

    在modle中创建两个模型表 class User(db.Model): id = db.Column(db.Integer,primary_key=True,autoincrement=True) ...

  3. c strncpy 容易出错的地方

    使用strncpy的是注意两点,目的是数组和目的是指针 .目的是数组: ] = "abcde"; // ] = "; strncpy(dest,src,N); dest[ ...

  4. 「CSS」常见的清除浮动方法

    下面介绍几种清除浮动的方案,供大家参考: 使用额外的标签clear:both .parent {padding: 10px;width: 200px;background: red;} .child ...

  5. go源码分析(三) 使用go http包开发web时遇到的坑之卸载插件，重启插件管理，仍然可以访问已经卸载的插件

    问题描述: web页面下发重启指令后,对卸载插件的处理不完整(虽然列表已经没有插件描述,但是在HandleFunc的路由列表中依然存在) 我们需要清空路由列表map 路由列表结构见代码: net/ht ...

  6. Java对接百度智能云人脸识别

    ------------------------->这篇文章就是自己做个笔记<------------------------- 首先登录or注册自己的百度智能云管理中心:https:// ...

  7. 由国产性能测试工具WEB压力测试仿真能力对比让我想到的

    软件的行业在中国已得到长足的发展,软件的性能测试在软件研发过程显得越来越重要.国产的性能工具在好多大公司都在提供云服务的有偿收费测试.如:阿里的PTS(Performance Testing Serv ...

  8. IDEA启动项目报错：Cannot open URL.Please check this URL is correct

    IDEA启动项目报错:Cannot open URL.Please check this URL is correct 问题:IDEA启动SSM项目,使用的Tomcat,报错 Cannot open ...

  9. asp.net c# 通过消息队列处理高并发请求（以抢小米手机为例）

    网站面对高并发的情况下,除了增加硬件, 优化程序提高以响应速度外,还可以通过并行改串行的思路来解决.这种思想常见的实践方式就是数据库锁和消息队列的方式.这种方式的缺点是需要排队,响应速度慢,优点是节省 ...

  10. Journal of Proteome Research | 人类牙槽骨蛋白的蛋白质组学和n端分析:改进的蛋白质提取方法和LysargiNase消化策略增加了蛋白质组的覆盖率和缺失蛋白的识别 | (解读人：卜繁宇)

    文献名:Proteomic and N-Terminomic TAILS Analyses of Human Alveolar Bone Proteins: Improved Protein Extr ...