首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现每日签到功能

Posted in Javascript onNovember 29, 2018

本文实例为大家分享了js实现每日签到功能的具体代码，供大家参考，具体内容如下

js实现每日签到功能

js：

var calUtil = { 
 getDaysInmonth : function(iMonth, iYear){ //当前年月的总天数 
  var dPrevDate = new Date(iYear, iMonth, 0); 
  return dPrevDate.getDate(); 
 }, 
 bulidCal : function(iYear, iMonth) { //构建当前年月对应的日历
  var aMonth = new Array(); 
  aMonth[0] = new Array(7); 
  aMonth[1] = new Array(7); 
  aMonth[2] = new Array(7); 
  aMonth[3] = new Array(7); 
  aMonth[4] = new Array(7); 
  aMonth[5] = new Array(7); 
  aMonth[6] = new Array(7); 
  var dCalDate = new Date(iYear, iMonth - 1, 1); 
  var iDayOfFirst = dCalDate.getDay(); 
  var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear); 
  var iVarDate = 1; 
  var d, w; 
  aMonth[0][0] = "日"; 
  aMonth[0][1] = "一"; 
  aMonth[0][2] = "二"; 
  aMonth[0][3] = "三"; 
  aMonth[0][4] = "四"; 
  aMonth[0][5] = "五"; 
  aMonth[0][6] = "六"; 
  for (d = iDayOfFirst; d < 7; d++) { 
  aMonth[1][d] = iVarDate; 
  iVarDate++; 
  } 
  for (w = 2; w < 7; w++) { 
  for (d = 0; d < 7; d++) { 
   if (iVarDate <= iDaysInMonth) { 
   aMonth[w][d] = iVarDate; 
   iVarDate++; 
   } 
  } 
  } 
  return aMonth; 
 }, 
 ifHasSigned : function(signList,day){ 
  var signed = false; 
  $.each(signList,function(index,item){ 
   var date = new Date(item.signDate); 
   if(date.getDate() == day) { 
    signed = true; 
    return false; 
   } 
  }); 
  return signed ; 
 }, 
 drawCal : function(iYear, iMonth ,signList) { 
  var currentYearMonth = iYear+"年"+iMonth+"月"; 
  var myMonth = calUtil.bulidCal(iYear, iMonth); 
  var htmls = new Array(); 
  htmls.push("<div class='sign_main' id='sign_layer'>"); 
  htmls.push("<div class='sign_succ_calendar_title'>"); 
  htmls.push("<div class='calendar_month_span'>"+currentYearMonth+"</div>"); 
  htmls.push("</div>"); 
  htmls.push("<div class='sign' id='sign_cal'>"); 
  htmls.push("<table class='table'>"); 
  htmls.push("<tr>"); 
  htmls.push("<th>" + myMonth[0][0] + "</th>"); 
  htmls.push("<th>" + myMonth[0][1] + "</th>"); 
  htmls.push("<th>" + myMonth[0][2] + "</th>"); 
  htmls.push("<th>" + myMonth[0][3] + "</th>"); 
  htmls.push("<th>" + myMonth[0][4] + "</th>"); 
  htmls.push("<th>" + myMonth[0][5] + "</th>"); 
  htmls.push("<th>" + myMonth[0][6] + "</th>"); 
  htmls.push("</tr>"); 
  var d, w; 
  for (w = 1; w < 7; w++) { 
  htmls.push("<tr>"); 
  for (d = 0; d < 7; d++) { 
   var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]); 
   if(ifHasSigned){ 
   htmls.push("<td class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>"); 
   } else { 
   htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>"); 
   } 
  } 
  htmls.push("</tr>"); 
  } 
  htmls.push("</table>"); 
  htmls.push("</div>"); 
  htmls.push("</div>"); 
  return htmls.join(''); 
 } 
};

页面效果代码：

<style type="text/css"> 
@media screen and (min-width:1024px) { 
 .rich_media { 
  width: 500px; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 20px; 
 } 
} 
</style> 
</head> 
<body style="background-color: #fff;"> 
 <div class="rich_media"> 
   <div id="page-content"> 
    <div style="text-align: center;background-color: #2FAA00;height: 50px;margin-bottom: 20px;"> 
     <span style="cursor: pointer;font-weight: 600;font-size: 20px;color: #fff;height: 50px;line-height: 50px;">每日签到</span> 
     <input type="hidden" id="userId" value="${user.id }" /> 
    </div> 
    <div class="container-fluid"> 
     <div class="row-fluid" id="calendar"> 

     </div> 
     <div id="btnDiv" style="display: none;"> 
      <div class="row-fluid text-center"> 
       <span id="sing_for_number" class="btn btn-default">签到</span> 
      </div> 
     </div> 
    </div> 
   </div> 
 </div> 
</body>

js调用方法

var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList); 
$("#calendar").html(str);

说明：signList是后台查询的已签到的时间集合，传入到js方法中会去判断哪一天签到了，然后改变签到天的显示效果，如上图！
此签到页面同样适应手机浏览器哟！

提要：

本文以写当前时间环境下当月的日历表为例，用最简单的方法实现JavaScript日历，旨在展示JS世界中实用为本、简单为上的解决问题的思路。

Web页中的日历一般离不开表格，通常都使用表格装载指定月的日期等信息。所以，要编写JS日历，首先必须解决的问题是表格的行与列问题。列是固定的，七列，因为一周有七天。行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数的需要量。

一. 表格的行数问题

1.首先取得处理月的总天数

JS不提供此参数，我们需要计算。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：

function is_leap(year) {
 return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}

接着定义一个包含十二个月在内的月份总天数的数组：

m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);

m_days这个数组里，二月份的天数已经加入闰年的信息：28+is_leap(ynow)。数组元素从0开始，正好对应于JS提供的Date函数提供的getMonth返回值，即0表示一月，1表示二月，2表示三月，依此类推。

这样，各月总数可以这样取得：m_days[x]。其中，x为0至11的自然数。

2.计算处理月第一天是星期几

可以使用Date函数的getDay取得，返回的值从0到6，0表示星期一，1表示星期二，2表示星期三，其余依此类推。代码如下（假设要处理的时间为2008年3月）：

n1str=new Date(2008,3,1);
firstday=n1str.getDay();

有了月总天数和该月第一天是星期几这两个已知条件，就可以解决表格所需行数问题：（当前月天数+第一天是星期几的数值）除以七。表格函数需要整数，因此，我们使用Math.ceil来处理：

tr_str=Math.ceil((m_days[mnow] + firstday)/7);

表格中的tr标签实际上代表表格的行，因此变量tr_str是我们往下写表格的重要依据。

二. 打印日历表格

可以使用两个for语句嵌套起来实现：外层for语句写行，内层for语句写单元格。

for(i=0;i<tr_str;i++) { //外层for语句 - tr标签
 document.write("<tr>");
 for(k=0;k<7;k++) { //内层for语句 - td标签
  idx=i*7+k; //表格单元的自然序号
  date_str=idx-firstday+1; //计算日期
  //这里是处理有效日期代码
 } //内层for语句结束
 document.write("</tr>");
} //外层for语句结束

单元格的自然序号是否代表有效日期非常关键，为此必须加入一个过滤机制：仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。

三. 以下是完整的JS日历代码：

function is_leap(year) { 
 return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
} //是否为闰年

var nstr=new Date(); //当前Date资讯
var ynow=nstr.getFullYear(); //年份
var mnow=nstr.getMonth(); //月份
var dnow=nstr.getDate(); //今日日期
var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯

var firstday=n1str.getDay(); //当月第一天星期几

var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数

var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数

//打印表格第一行（有星期标志）
document.write ("<table border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");

for(i=0;i<tr_str;i++) { //表格的行
 document.write("<tr>");
 for(k=0;k<7;k++) { //表格每行的单元格
  idx=i*7+k; //单元格自然序列号
  date_str=idx-firstday+1; //计算日期
  (date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的）
  //打印日期：今天底色为红
  date_str==dnow ? document.write ("<td align='center' bgcolor='red'>" + date_str + "</td>") : document.write ("<td align='center'>" + date_str + "</td>");
 }
 document.write("</tr>"); //表格的行结束
}

document.write("</table>"); //表格结束

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现每日签到功能

- Author -

pilihou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 #Javascript
javascript实现考勤日历功能
Nov 29 #Javascript
vsCode安装使用教程和插件安装方法
Aug 24 #Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 #Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 #Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 #Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
介绍信(57) 辞职信(98) 事迹材料(636) 感言(394) 邀请函(127) 方案(1080) 表扬信(62) 检讨书(456) 教学反思(909) 广播稿(323)
You might like
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
Yii 快速，安全，专业的PHP框架
2014/09/03 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
微信小程序媒体组件详解（视频，音乐，图片）
2017/09/19 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
微信小程序地图导航功能实现完整源代码附效果图（推荐）
2019/04/28 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
vue中如何添加百度统计代码
2020/12/19 Vue.js
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python线程、进程和协程详解
2016/07/19 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python列表操作方法详解
2020/02/09 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
印度网上购物首选目的地：Flipkart
2016/08/01 全球购物
Kappa英国官方在线商店：服装和运动器材
2020/11/22 全球购物
公司收款委托书范本
2014/09/20 职场文书
师德标兵事迹材料
2014/12/19 职场文书
时尚女魔头观后感
2015/06/04 职场文书
负责培养人意见
2015/06/05 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技