js实现每日签到功能

2024-11-29 08:24:31

本文实例为大家分享了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>"); //表格结束

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

基于JavaScript实现每日签到打卡轨迹功能

本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下 1. 核心文件 calendar.js var calUtil = { //当前日历显示的年份 showYear:2018, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays:1, eventName:"load", //初始化日历 init:function(signList){ calUtil.setMonthAndDay(); calUtil.draw(
JavaScript动态创建link标签到head里的方法

本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码代码如下: var cssURL = '/style.css', linkTag = $('<l
trackingjs+websocket+百度人脸识别API实现人脸签到

在公司做了个年会的签到.抽奖系统.用java web做的,用公司的办公app扫二维码码即可签到,扫完码就在大屏幕上显示这个人的照片.之后领导让我改得高大上一点,用人脸识别来签到,就把扫二维码的步骤改成人脸识别. 了解了相关技术后,大致思路如下:先用websocket与后台建立通讯:用trackingjs在页面调用电脑摄像头,监听人脸,发现有人脸进入屏幕了,就把图片转成base64字符串,通过websocket发送到后端:后端拿到图片,调用百度的人脸识别API,去人脸库中匹配(当然事先要在百度云建
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 =
php实现每日签到功能

每日签到的功能,供大家参考,具体内容如下首次签到获得1个积分,第二次签到获得2个积分,第三次签到获得3个积分,以此类推但是签到必须每天连续积分才可以递增,如果有中断再次签到时获得积分仍然从1开始递增; user: id,username,count,point,sign_time sign.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
使用Jquery实现每日签到功能

一直想做一个签到功能,但是百度了都没有自己想要的,所以就借着网上搜到的素材然后整合自己之前写的插件layerModel自己整合了一个,大家娱乐娱乐就好! calendar.js var calUtil = { getDaysInmonth : function(iMonth, iYear){ var dPrevDate = new Date(iYear, iMonth, 0); return dPrevDate.getDate(); }, bulidCal : function(iYear, i
微信小程序本地存储实现每日签到、连续签到功能

昨天在看自己写的小程序项目,无意中打开了CSDN APP,突然间觉得,我去,如果在小程序中加个"签到"功能,岂不美哉!(好吧,其实是买的书昨天没到货,然后闲着无事,就想起了大明湖畔的"签到") 但是吧,又不想写和服务器交互的,本着"简单点"的原则,我想起了曾经的挚爱-- 本地存储 . 先说说相关注意吧: 其一就是 storage中只能存放字符串! 我去,昨晚大部分时间都是在搞这个.以前一直认为存放的是对象,兴致勃勃写完发现点击以后出现了"
PHP连续签到功能实现方法详解

本文实例讲述了PHP连续签到功能实现方法.分享给大家供大家参考,具体如下: require "./global.php"; $act = isset($_GET['act']) ? $_GET['act'] : "error"; // d($act); switch($act){ case "qiandao": $uid = intval($_POST['uid']); $res = $db -> get('qian_dao','*',ar
基于jquery实现日历签到功能

在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
微信小程序实现签到功能

本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下效果图: 今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日期如:["16", "14"] 点击签到执行 calendarSign sign.wxml  <view class="calendar"> <view class='bcfff'> <view class=&q
微信小程序签到功能

本文实例为大家分享了简易微信小程序签到功能的具体代码,供大家参考,具体内容如下一.效果图点击签到后二.数据库用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用户id和签到日期的数据,如下图三.后端后端写两个接口,一个用于查询用户今日是否签到和签到记录总数,一个用于添加用户签到信息到数据库.这里用的是python的flask框架. (1)查询用户签到信息接口: @app.route('/get_sign/<user_id>') def get_sign(user_i
使用python实现微信小程序自动签到功能

功能描述目标完成多账号微信小程序每天自动签到输出签到成功则向微信群发送签到成功的信息否则提示用户签到失败,需手动签到包管理 requests itchat time threading 程序的结构设计步骤1 获取要发送的json数据:地址步骤2 向服务器发送请求步骤3 根据服服务器响应判断签到是否完成步骤4 微信交互代码实现使用findler抓包工具查看请求类型 https://reserve.25team.com/wxappv1/yi/index?version=13 可以看

js实现每日签到功能

相关推荐

随机推荐