jQuery,月历,左右点击事件实现月份的改变
html页面:
<div class="recordbriefing-title-top-body">
<span class="record-left"></span>
<p class="record-Ptime"></p>
<span class="record-right"></span>
</div>
css样式:
.record-left{
content: "";
width: 0;
height: 0;
float: left;
border-top: 10px solid transparent;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
margin-top:5px;
}
.record-right{
content: "";
width: 0;
height: 0;
float: right;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
margin-top:5px;
margin-right: 25px;
}
.record-Ptime{
display:inline-block;
width: 80%;
font-size: 16px;
color: #000;
text-align: center;
line-height: 31px;
}
js部分:
$(function() {
var rsValue='';
var todayData=new Date();
var year= todayData.getFullYear();
var month= todayData.getMonth();//月份从0开始
// console.log(typeof month);
var day=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var todayDay;
for(var i=0;i<day.length;i++){
if(i==month){
todayDay=day[i];
}
if((year%4)==0){
if((month+1)==2){
todayDay=29;
}
}
}
if(month>9){
rsValue=year+'.'+(month+1)+'.01~'+year+'.'+(month+1)+'.'+todayDay;
}else{
rsValue=year+'.0'+(month+1)+'.01~'+year+'.0'+(month+1)+'.'+todayDay;
}
// console.log(rsValue);
// 得到的拼接时间显示在页面上
$(".record-Ptime").empty();
$('.record-Ptime').append(rsValue);
changeTime();
// 上个月 左边改变时间事件
var j=1;
$(".record-left").on("click", function(){
j--;
// 判断月份是否>0,是13时就年份加1
if((month+j)<=0){
year-=1;
month=11;
j=1;
}
for(var i=0;i<day.length;i++){
if(i==(month+j-1)){
todayDay=day[i];
}
if((year%4)==0){
if((month+j)==2){
todayDay=29;
}
}
}
if((month+j)>9){
rsValue=year+'.'+(month+j)+'.01~'+year+'.'+(month+j)+'.'+todayDay;
}else{
rsValue=year+'.0'+(month+j)+'.01~'+year+'.0'+(month+j)+'.'+todayDay;
}
// 得到的拼接时间显示在页面上
$(".record-Ptime").empty();
$('.record-Ptime').append(rsValue);
changeTime();
});
// 下个月 右边改变时间事件
$(".record-right").on("click", function(){
j++;
// 判断月份是否>12,是13时就年份加1
if((month+j)>12){
year+=1;
month=0;
j=1;
}
for(var i=0;i<day.length;i++){
if(i==(month+j-1)){
todayDay=day[i];
}
if((year%4)==0){
if((month+j)==2){
todayDay=29;
}
}
}
if((month+j)>9){
rsValue=year+'.'+(month+j)+'.01~'+year+'.'+(month+j)+'.'+todayDay;
}else{
rsValue=year+'.0'+(month+j)+'.01~'+year+'.0'+(month+j)+'.'+todayDay;
}
// 得到的拼接时间显示在页面上
$(".record-Ptime").empty();
$('.record-Ptime').append(rsValue);
changeTime();
});
});
jQuery,月历,左右点击事件实现月份的改变的更多相关文章
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- js和jquery触发按钮点击事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- jQuery模拟鼠标点击事件失效的问题
最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...
- jquery/js记录点击事件,单击次数加一,双击清零
目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...
- jQuery添加options点击事件并传值
说明: 根据选择不同店铺选项,上送不同id值,展示不同商品列表 var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}& ...
- jQuery 动态绑定的点击事件
$(function () { , $_div = $('#test'); $('input[name=addbtn]').on('click', function () { $_div.append ...
- JavaScript与jQuery关于鼠标点击事件
即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...
- jquery让一个点击事件刷新页面就自己执行一次的方法
$('name')这个元素之前已经绑定过事件啦,(on绑定)然后直接调用下即可: $('name').click();
- jquery中绑定点击事件
$("body").on("click",".tab-contentBox td",function(){}; $(".tab-c ...
随机推荐
- 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结
基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...
- multi-tap
multi-tap又称 multi-press . 是在手机,或者电视遥控上的keypad定义,有如下2类标准: 1. ITU-T E.161 2.T9 使用举例如下: Consider a typi ...
- java面向对象课程设计-数学表达式计算器
项目简介 设计一个计算器,其能够: 1)由用户输入一个简单的四则运算表达式,求出其计算结果后显示. 2)特殊数学函数,如:绝对值.取整.三角函数.倒数.平方根.平方.立方等. 3)对一定范围内的数字将 ...
- Laravel 5 如何实现网站在维护模式下允许指定 IP 用户访问(白名单)
为了测试需要,有时候需要在网站处于维护模式下允许特定IP访问网站,在 Laravel 中,这可以通过为维护模式编写自定义中间件来实现. 默认情况下,Laravel 使用 CheckForMainten ...
- Spring Data JPA 简单查询
一.常用规则速查 1 And 并且2 Or 或3 Is,Equals 等于4 Between 两者之间5 LessThan 小于6 LessThanEqual 小于等于7 Gre ...
- 【题解】IOI2005River 河流
一节语文课想出来的玩意儿,调了几个小时……可见细心&好的代码习惯是有多么的重要 (:へ:) 不过,大概竞赛最令人开心的就是能够一点一点的感受到自己的进步吧,一天比一天能够自己想出更多的题,A题 ...
- POJ2155 Matrix 【二维线段树】
题目链接 POJ2155 题解 二维线段树水题,蒟蒻本想拿来养生一下 数据结构真的是有毒啊,, TM这题卡常 动态开点线段树会TLE[也不知道为什么] 直接开个二维数组反倒能过 #include< ...
- 理解JavaScript的function
JavaScript中最有特色而又让你困惑的function算一个了,下面看一下常用操作: function doit(){ ..... } doit(); JavaScript中的函数我们可以把它当 ...
- CodeIgniter自带的数据库类使用介绍
在 CodeIgniter 中,使用数据库是非常频繁的事情.你可以使用框架自带的数据库类,就能便捷地进行数据库操作. 初始化数据库类 依据你的数据库配置载入并初始化数据库类: view source ...
- bzoj 3720 Gty的妹子树 树分块?瞎搞
Gty的妹子树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2149 Solved: 781[Submit][Status][Discuss] D ...