首页
所有分类
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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
PHP守护进程实例
Mar 06 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
angular2使用简单介绍
Mar 01 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
解析原生JS getComputedStyle
May 25 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
蓝屏(1) 鸿蒙(2) 声卡驱动(1) 虚拟键盘(1) 鸿蒙3.0(1) win7(2) 蓝牙耳机(1) 蓝牙(1) RustDesk(1) Debian(1)
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
Admin generator, filters and I18n
2011/10/06 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
ExtJS4 组件化编程，动态加载，面向对象，Direct
2011/05/12 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
javascript的BOM汇总
2015/07/16 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
[06:10]6.81新信使新套装！给你一个炫酷的DOTA2
2014/05/06 DOTA
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python内建模块struct实例详解
2018/02/02 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
美国女性卫生用品公司：Thinx
2017/06/30 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
销售人员获奖感言
2014/02/05 职场文书
委托书范文
2014/04/02 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
亮剑观后感300字
2015/06/05 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP