基於jQuery的日曆+每日簽到功能
阿新 • • 發佈：2019-01-08
公司要開發一個h5頁面，裡邊有一個每日簽到抽獎的功能，本以為這樣的外掛應該會有很多，結果找到的全都是僅生成日曆的外掛，於是乎就出現了下面這個東西。（前端菜鳥，請大神嘴下留情，也請小夥伴們多提寶貴意見）
廢話不多說，下面先是html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基於jq的日曆簽到功能</title>
<script src="js/jquery-3.2.1.js" 這部分沒有什麼好說的，借了不知某位仁兄已經寫好的生成日曆的模板，我再加上4個button，為了實現自己的需求。
接著樣式表走起：
* {
margin: 0;
padding: 0;
list-style: none;
}
.home {
width: 100%;
}
.thead {
width: 100%;
}
.thead li {
float: left;
width: 14.28%;
text-align: center;
}
.home tbody>tr>td {
width: 14.28%;
height: 40px;
background: #ececec;
text-align: center;
}
button{
width: 100px;
height: 40px;
font-size: 20px;
float: left;
}
#month {
text-align: center;
}
.qiandao {
color: red;
}
/*原始檔中的樣式基本沒動，除了給我們新增的button寫了樣式*/雖說我們是h5頁面，但是現在實現功能要緊，自適應什麼的稍後再說。
最後就是js了：
//本地模擬已簽到日期天數
var localDate = {
date: []
}
for(var j = 0; j < 30; j++) {
var a = Math.ceil(Math.random() * 11);
if(a < 10) {
a = "0" + a;
}
var b = Math.ceil(Math.random() * 30);
if(b < 10) {
b = "0" + b;
}
var c = a.toString() + b.toString();
localDate.date.push(c);
}
//初始化日期資料
var slidate = new Date();
var x = slidate.getMonth() + 1;
var n = slidate.getMonth();
var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //獲取當月的1日等於星期幾
var m = slidate.getMonth() + 1;
var d = new Date(slidate.getFullYear(), parseInt(m), 0); //獲取月
var conter = d.getDate(); //獲取當前月的天數
var monthNum = "0" + (slidate.getMonth() + 1) + "月";
var monthCheck = (slidate.getMonth() + 1);
var y = slidate.getDate();
function initall() {
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
}
function dateHandler(monthFirst, d, conter, monthNum) {
var u = 1;
var blank = true;
var $tbody = $('#tbody'),
$month = $("#month"),
_nullnei = '';
var p = document.createElement("p");
var monthText = document.createTextNode(monthNum);
p.appendChild(monthText);
$month.append(p);
//遍歷日曆網格
for(var i = 1; i <= 6; i++) {
_nullnei += "<tr>";
for(var j = 1; j <= 7; j++) {
_nullnei += '<td></td>';
}
_nullnei += "</tr>";
}
$tbody.html(_nullnei);
//遍歷網格內容
var $slitd = $tbody.find("td");
for(var i = 0; i < conter; i++) {
$slitd.eq(i + monthFirst).html("<p>" + parseInt(i + 1) + "</p>")
}
//給有日期的td加上id
var dayBlock = document.getElementsByTagName("td");
for(var i = 0; i < dayBlock.length; i++) {
if(dayBlock[i].textContent != "") {
dayBlock[i].setAttribute("id", "td" + u);
u++;
}
}
//若日期不足排滿每一行的tr，則刪除最後一個tr
var blankTr = document.getElementsByTagName("tr");
var blankTd = blankTr[5].getElementsByTagName("td");
for(var i = 0; i < blankTd.length; i++) {
if(blankTd[i].textContent != "") {
blank = false;
}
}
if(blank == true) {
blankTr[5].remove();
}
}
function checkDate(prep) {
var dateArray = [];
var newArray = [];
//刪除不是本月的日期
for(var i = 0; i < localDate.date.length; i++) {
dateArray.push(localDate.date[i]);
}
for(var i = 0; i < dateArray.length; i++) {
if(dateArray[i].charAt(1) != prep) {
dateArray[i] = undefined;
}
}
for(var i = 0; i < dateArray.length; i++) {
if(dateArray[i] != undefined) {
newArray.push(dateArray[i]);
}
}
//遍歷陣列為已簽到日期新增class
for(var i = 0; i < newArray.length; i++) {
if(newArray[i].charAt(2) == 0) {
for(var j = 0; j < 10; j++) {
if(newArray[i].charAt(3) == j) {
var checked = "#td" + j;
$(checked).addClass("qiandao");
}
}
} else if(newArray[i].charAt(2) == 1) {
for(var j = 0; j < 10; j++) {
if(newArray[i].charAt(3) == j) {
var checked = "#td1" + j;
$(checked).addClass("qiandao");
}
}
} else {
for(var j = 0; j < 10; j++) {
if(newArray[i].charAt(3) == j) {
var checked = "#td2" + j;
$(checked).addClass("qiandao");
}
}
}
}
}
//當天簽到新增樣式
$("#button").on("click", function() {
$("tr").remove();
$("p").remove();
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
var thisDay = "#td" + y;
var checkPic = false;
if(m > 10 && y < 10) {
var thisBlock = m.toString() + y.toString();
} else if(m < 10 && y > 10){
var thisBlock = "0" + m.toString() + y.toString();
}else if(m > 10 && y < 10){
var thisBlock = m.toString() + "0" + y.toString();
}else if(m < 10 && y < 10){
var thisBlock = "0" + m.toString() + "0" + y.toString();
}
for(var e = 0; e < localDate.date.length; e++) {
if(localDate.date[e] === thisBlock) {
checkPic = true;
}
}
if(checkPic == true) {
alert("您今天已經簽到了！");
} else {
$(thisDay).addClass("qiandao");
alert("已簽到！");
localDate.date.push(thisBlock);
}
})
//查詢已簽到天數
$("#button2").on("click", function() {
alert("您已經簽到了" + localDate.date.length + "天！");
})
//查詢歷史記錄
$("#button3").on("click", function() {
$("tr").remove();
$("p").remove();
if(m > 0 && n > 0) {
m--, n--;
}
var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //獲取當月的1日等於星期幾
var d = new Date(slidate.getFullYear(), parseInt(m), 0); //獲取月
var conter = d.getDate(); //獲取當前月的天數
var monthNum = "0" + (m) + "月";
var monthCheck = m;
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
})
//返回上月記錄
$("#button4").on("click", function() {
$("tr").remove();
$("p").remove();
if(m < x) {
m++, n++;
}
var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //獲取當月的1日等於星期幾
var d = new Date(slidate.getFullYear(), parseInt(m), 0); //獲取月
var conter = d.getDate(); //獲取當前月的天數
var monthNum = "0" + (m) + "月";
var monthCheck = m;
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
})
window.addEventListener("load", initall, false);感覺很多地方都是垃圾程式碼 - -
我們專案只走1個月，功能只需要實現當天簽到就可以了，可是這一個月是跨月的（不是從某個月1號到30號or31號），所以我在構思的時候想到如果客戶要求在第二個月要查上個月那部分的簽到情況怎麼辦？？？把這個情況跟領導溝通了一下，雖然領導說這個功能是不需要有的，但是客戶嘛，你們懂得~~~做出來就做出來吧，他們不用的話就當提升自己了。在寫這個功能的時候又想到。。。。雖然這個專案是隻要求查詢兩個月的，那萬一以後要是會再用到呢？？？不如干脆做通用的吧。。。強迫症的我迫於“程式碼的通用性”的壓力，不斷的給自己新增新需求，成型之後功能如下（不過分依賴後臺的前提下）：
- 當天簽到（如已經簽到過則不做任何響應）
- 給歷史（包括今天）已經簽到過的日期新增樣式
- 可查詢所有簽到歷史記錄
- 可查詢已簽到天數
注：本人跟公司的後臺大神溝通後規定返回的日期資料格式為[“0818”,”0819”,”0920”,”0921”],所以在Js中模擬隨機生成30個日期資料供檢測使用。