简单效果图:

代码如下:

<!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进行npm run dev时候Cannot GET/

    在用vue cli进行项目npm run dev 时候,页面Cannot GET/ 主要是把config/index.js里面的dev:{assetsPublicPath:'/'}改成了跟build里 ...

  2. frida报错frida.InvalidArgumentError: device not found问题解决方案

    一.问题描述     python安装好frida框架后,在安卓端启动了frida-server,启动要hook的应用,在cmd中执行python脚本,报错frida.InvalidArgumentE ...

  3. CMAKE交叉编译快速入门

    cmake 工具 cmake 使用非常简单,最常用的用法是 cmake . 在当前目录执行cmake 官方帮助 -D <var>:<type>=<value> -D ...

  4. 2020centos解决“nginx 403 Forbidden"错误的故事

    最近折腾一个放在日本的vps,网速还可以,就是经常丢包. 原本配置了Nginx的做代理服务器,我想反正服务器空闲者,放点我自己的资料 配置了一个静态html文件,方便自己随时查看 结果,不停的修改ng ...

  5. PyQt完整入门教程

    1.GUI开发框架简介 19年来,一直在做Android ROM相关测试,也有了一定的积累:20年,计划把之前完整的测试方案.脚本.工具进行整合复用. 第一期计划是开发一个GUI的测试工具,近期也进行 ...

  6. Vue2.0 【第二季】第2节 Vue.extend构造器的延伸

    目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...

  7. 搭建Java开发环境之配置环境变量

    前言 初学Java不久的二胖在搭建Java开发环境一步就遇到问题,他不由得感叹:万事开头难啊!但感叹之后它还是鼓足了劲去努力解决它,二胖在电脑上Google了一番,最终环境是搭建成功了,但他心中对&q ...

  8. 2019-2020-2 20174313张博《网络对抗技术》Exp2-后门原理与实践

    一.实验名称 后门原理与实践. 二.实验目的与要求 ·掌握后门的概念,知道常见的后门种类,深入理解后门的运作原理. ·掌握几种常见的后门工具,学会利用后门工具进行一些简单操作. ·增强信息安全意识,认 ...

  9. typescript package.json vscode 终端 运行任务 Ctrl shift B

    { "dependencies": { "typescript": "^3.6.4" } }

  10. 问不倒的HTTP协议

    一.HTTP简介 1.HTTP HTTP:超文本传输协议,是一种通信协议:允许超文本标记文档从Web服务器传送到客户端的浏览器中. 简单:传输html文件的协议. Web:是一种基于超文本和HTML的 ...