jQueryベースのカレンダー+毎日チェックイン機能
28049 ワード
会社は1つのh 5ページを開発して、中には毎日抽選に署名する機能があって、このようなプラグインがたくさんあるはずだと思っていたが、結局見つけたのはすべてカレンダーを生成するプラグインだけで、そこで下のものが現れた.(前端菜鳥は、大神の口の下で容赦してください.仲間たちにも貴重な意見を言ってください)
くだらないことは言わないで、次はhtml部分です.
この部分は何も言うことはありませんが、ある仁兄が書いたカレンダーを生成するテンプレートを借りて、私は4つのbuttonを加えて、自分のニーズを実現するために.
次にスタイルシートを移動します.
私たちはh 5ページですが、今は機能を実現することが重要で、適応などは後で話します.
最後はjsです.
ゴミコードが多いような気がします
私たちのプロジェクトは1ヶ月しか歩いていないので、机能は当日のサインを実现するだけでいいのですが、この1ヶ月は月をまたいでいます(ある月1日から30日or 31日ではありません)ので、もしお客様が2ヶ月目に先月のサインの状况を调べるように要求したらどうしますか??この状况をリーダーとコミュニケーションして、リーダーはこの机能は必要ないと言っていますが、お客様は~~~作って作ってください.彼らが使わないなら、自分を向上させると思っています.この機能を書いているうちにまた思いました...このプロジェクトは2ヶ月の照会しか要求していませんが、もし後でまた使うとしたら???いっそ通用するものを作ろう...強迫症の私は「コードの汎用性」の圧力に迫られ、絶えず自分に新しい需要を追加し、成形後の機能は以下の通りである(バックグラウンドに過度に依存しない前提の下で):当日(すでに署名した場合は何も応答しない) 履歴(今日を含む)に署名した日付にスタイル を追加は、すべての署名履歴 を問い合わせることができる.は、署名された日数 を問い合わせることができる.
注:本人が会社のバックグラウンドの大神と疎通した後に規定して帰る日付のデータのフォーマットは[“0818”,“0819”,“0920”,“0921”]で、だからJsの中でシミュレーションしてランダムに30個の日付のデータを生成して使って検査に供します.
くだらないことは言わないで、次はhtml部分です.
<html>
<head>
<meta charset="UTF-8">
<title> jq title>
<script src="js/jquery-3.2.1.js">script>
<div class="home">
<body>
<div class="home">
<h1 id="month">h1>
<table cellspacing="1" cellpadding="1" class="home">
<ul class="thead">
<li> li>
<li> li>
<li> li>
<li> li>
<li> li>
<li> li>
<li> li>
ul>
<tbody id="tbody">tbody>
table>
<button id="button" style="float: left;"> button>
<button id="button2" style="float: left;"> button>
<button id="button3" style="float: left;"> button>
<button id="button4" style="float: left;"> button>
div>
body>この部分は何も言うことはありませんが、ある仁兄が書いたカレンダーを生成するテンプレートを借りて、私は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 */私たちはh 5ページですが、今は機能を実現することが重要で、適応などは後で話します.
最後は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 += "";
for(var j = 1; j <= 7; j++) {
_nullnei += '';
}
_nullnei += "";
}
$tbody.html(_nullnei);
//
var $slitd = $tbody.find("td");
for(var i = 0; i < conter; i++) {
$slitd.eq(i + monthFirst).html(""
+ parseInt(i + 1) + "")
}
// 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ヶ月は月をまたいでいます(ある月1日から30日or 31日ではありません)ので、もしお客様が2ヶ月目に先月のサインの状况を调べるように要求したらどうしますか??この状况をリーダーとコミュニケーションして、リーダーはこの机能は必要ないと言っていますが、お客様は~~~作って作ってください.彼らが使わないなら、自分を向上させると思っています.この機能を書いているうちにまた思いました...このプロジェクトは2ヶ月の照会しか要求していませんが、もし後でまた使うとしたら???いっそ通用するものを作ろう...強迫症の私は「コードの汎用性」の圧力に迫られ、絶えず自分に新しい需要を追加し、成形後の機能は以下の通りである(バックグラウンドに過度に依存しない前提の下で):
注:本人が会社のバックグラウンドの大神と疎通した後に規定して帰る日付のデータのフォーマットは[“0818”,“0819”,“0920”,“0921”]で、だからJsの中でシミュレーションしてランダムに30個の日付のデータを生成して使って検査に供します.