首页
所有分类
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 相关文章推荐
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
vue实现下拉菜单树
Oct 22 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
心得体会(660) 职业生涯规划书(234) 欢迎词(65) 证婚词(21) 思想汇报(404) 岗位职责(1324) 演讲稿(869) 介绍信(57) 创业计划书(312) 道歉信(39)
You might like
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Django CBV类的用法详解
2019/07/26 Python
如何理解python中数字列表
2020/05/29 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
国外平面设计第一市场：99designs
2016/10/25 全球购物
英国森林假期：Forest Holidays
2021/01/01 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
办理暂住证介绍信
2014/01/11 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
担保书格式及范文
2014/04/01 职场文书
融资合作协议书范本
2014/10/17 职场文书
交通事故案件代理词
2015/05/23 职场文书
迎新生晚会主持词
2015/06/30 职场文书