コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery はカレンダーの毎日のサインイン Web ページの特殊効果を実装します

jQuery はカレンダーの毎日のサインイン Web ページの特殊効果を実装します

小云云
リリース： 2018-03-22 13:06:17
オリジナル
2932 人が閲覧しました

この記事は主に、カレンダーの毎日のサインイン Web ページの特殊効果を実装するための jQuery をコードの形式で共有します。

index.html

コード: 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery简洁的日历签到插件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/sign2.css">

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/calendar2.js"></script>
<script type="text/javascript">
$(function(){
  //ajax获取日历json数据
  var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
   calUtil.init(signList);
});
</script>

</head>
<body>
	
<p style="" id="calendar"></p>

<p id="sign_note" style="text-align:center;position: relative;padding: 15px;    font-size: 14px;">
	<span style="color:red;">*规则：本月签到21天即可领取奖品</span>
</p>


</body>
</html>
ログイン後にコピー

calendar2.js

var calUtil = {
  //当前日历显示的年份
  showYear:2015,
  //当前日历显示的月份
  showMonth:1,
  //当前日历显示的天数
  showDays:1,
  eventName:"load",
  //初始化日历
  init:function(signList,s=&#39;&#39;){
    calUtil.setMonthAndDay();
    if (typeof(s) == &#39;undefined&#39;){
    }else{
      signList.splice(&#39;&#39;,&#39;&#39;,s);
    }
    calUtil.draw(signList);
    calUtil.bindEnvent(signList);
  },
  draw:function(signList){
    //绑定日历
    //alert(signList.length);
    console.log(signList);
    if(signList.length > 21){
      //alert(21);
      $("#sign_note").empty();
      $("#sign_note").html(&#39;<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 已达标，获取1次抽奖</button>&#39;);
    }
    var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);
    $("#calendar").html(str);
    //绑定日历表头
    var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";
    $(".calendar_month_span").html(calendarName);  
  },
  //绑定事件
  bindEnvent:function(signList){
    // //绑定上个月事件
    // $(".calendar_month_prev").click(function(){
    //   //ajax获取日历json数据
    //   //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
    //   calUtil.eventName="prev";
    //   calUtil.init(signList);
    // });
    // //绑定下个月事件
    // $(".calendar_month_next").click(function(){
    //   //ajax获取日历json数据
    //   //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
    //   calUtil.eventName="next";
    //   calUtil.init(signList);
    // });
    
    $(".calendar_record").click(function(){
      //ajax获取日历json数据
      //alert(typeof(signList)+"yxy");
    	//var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
    	//var tmp = {"signDay":$(this).html()};
      //if (typeof(signList) == &#39;undefined&#39;){
        //不做处理
      //}else{
      //  signList.splice(&#39;&#39;,&#39;&#39;,tmp);
      //  console.log(signList);
      //  calUtil.init(signList);
     // }
     //alert($(this).html());
    var tmp = {"signDay":$(this).html()};
    calUtil.init(signList,tmp);
     
      
      
    });
  },
  //获取当前选择的年月
  setMonthAndDay:function(){
    switch(calUtil.eventName)
    {
      case "load":
        var current = new Date();
        calUtil.showYear=current.getFullYear();
        calUtil.showMonth=current.getMonth() + 1;
        break;
      case "prev":
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
        calUtil.showMonth=parseInt(nowMonth)-1;
        if(calUtil.showMonth==0)
        {
            calUtil.showMonth=12;
            calUtil.showYear-=1;
        }
        break;
      case "next":
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
        calUtil.showMonth=parseInt(nowMonth)+1;
        if(calUtil.showMonth==13)
        {
            calUtil.showMonth=1;
            calUtil.showYear+=1;
        }
        break;
    }
  },
  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){
    if(item.signDay == day) {
     signed = true;
     return false;
    }
   });
   return signed ;
  },
  drawCal : function(iYear, iMonth ,signList) {
   var myMonth = calUtil.bulidCal(iYear, iMonth);
   var htmls = new Array();
   htmls.push("<p class=&#39;sign_main&#39; id=&#39;sign_layer&#39;>");
   htmls.push("<p class=&#39;sign_succ_calendar_title&#39;>");
   //htmls.push("<p class=&#39;calendar_month_next&#39;>下月</p>");
   //htmls.push("<p class=&#39;calendar_month_prev&#39;>上月</p>");
   htmls.push("<p class=&#39;calendar_month_span&#39;></p>");
   htmls.push("</p>");
   htmls.push("<p class=&#39;sign_equal&#39; id=&#39;sign_cal&#39;>");
   htmls.push("<p class=&#39;sign_row&#39;>");
   htmls.push("<p class=&#39;th_1 bold&#39;>" + myMonth[0][0] + "</p>");
   htmls.push("<p class=&#39;th_2 bold&#39;>" + myMonth[0][1] + "</p>");
   htmls.push("<p class=&#39;th_3 bold&#39;>" + myMonth[0][2] + "</p>");
   htmls.push("<p class=&#39;th_4 bold&#39;>" + myMonth[0][3] + "</p>");
   htmls.push("<p class=&#39;th_5 bold&#39;>" + myMonth[0][4] + "</p>");
   htmls.push("<p class=&#39;th_6 bold&#39;>" + myMonth[0][5] + "</p>");
   htmls.push("<p class=&#39;th_7 bold&#39;>" + myMonth[0][6] + "</p>");
   htmls.push("</p>");
   var d, w;
   for (w = 1; w < 6; w++) {
    htmls.push("<p class=&#39;sign_row&#39;>");
    for (d = 0; d < 7; d++) {

     var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
     console.log("001:"+ifHasSigned);
     if(ifHasSigned && typeof(myMonth[w][d]) != &#39;undefined&#39;){
      htmls.push("<p class=&#39;td_"+d+" on&#39;>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
     } else {
      htmls.push("<p class=&#39;td_"+d+" calendar_record&#39;>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
     }
    }
    htmls.push("</p>");
   }
   htmls.push("</p>");
   htmls.push("</p>");
   htmls.push("</p>");
   return htmls.join(&#39;&#39;);
  }
};
ログイン後にコピー

sign2.css

.singer_r_img {
	display: block;
	line-height: 45px;
	background: url(../images/sing_week.gif) right 2px no-repeat;
	vertical-align: middle;
	margin-bottom: -10px;
	text-decoration: none;
}

.singer_r_img:hover {
	background-position: right -53px;
	text-decoration: none;
}

.singer_r_img span {
	margin-left: 14px;
	font-size: 16px;
	font-family: &#39;Hiragino Sans GB&#39;,&#39;Microsoft YaHei&#39;,sans-serif !important;
	font-weight: 700;
	color: #165379;
}

.singer_r_img.current {
	background: url(images/sing_sing.gif) no-repeat 0 2px;
	border: 0;
	text-decoration: none;
}


.sign_succ_calendar_title {
	text-align: center;
	/*width: 398px;*/
	border-left: 1px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;
	background: #fff;
}

.sign_main {
	/*width: 400px;*/
/**background-color: #FBFEFE;**/
	border-top: 1px solid #e3e3e3;
	font-family: "Microsoft YaHei",SimHei;
	display: block;
}

.calendar_month_span {
	display: inline;
	line-height: 40px;
	font-size: 16px;
	color: #656565;
	letter-spacing: 2px;
	font-weight: bold;
}

.sign_equal {
	display:table;
	border-collapse:separate;
	width: 100%;
}

.sign_row {
	display:table-row;
}
.sign_row p {
	display:table-cell;
	width:14.3%;
	border-top: 1px solid #e3e3e3;
	/*border-bottom: 1px solid #e3e3e3;*/
	border-left: 1px solid #e3e3e3;
	height: 40px;
    text-align: center;
    line-height: 40px;
}
.sign_row .bold{
	font-weight: bold;
}
.sign_row p:last-child { 
	border-right: 1px solid #e3e3e3;
}
.sign_equal .sign_row:last-child p{
	border-bottom: 1px solid #e3e3e3;
}
.sign_equal .on {
	background: url(../images/sign_have.gif) no-repeat center;
}

.sign_contener,.sign_contener:visited {
	line-height: 30px;
	background: #00a0e9;
	border: none;
	color: white;
	border-radius: 30px;
	padding: 0 10px;
	font-size: 16px;
}

.sign_contener:hover{
	background-color: red;
}
ログイン後にコピー

関連する推奨事項:

カレンダーのサインインに関するおすすめ記事

php+mysql+jに問い合わせるカレンダーチェックインの実装

jquery_jqueryをベースにしたカレンダーチェックイン機能の実装

以上がjQuery はカレンダーの毎日のサインイン Web ページの特殊効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery サインイン
ソース：php.cn
前の記事：JS サブクラスは Object.getPrototypeOf を使用して親クラスを呼び出すにはどうすればよいでしょうか? 次の記事：JavaScriptの継承方法を詳しく解説(1)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート