ホームページ >ウェブフロントエンド >htmlチュートリアル >ページめくり効果を「週」単位で2016週2_html/css_WEB-ITnoseとして表示
ページめくり効果を「週」単位で2016週2_html/css_WEB-ITnoseとして表示
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:00:191092ブラウズ
最初のレンダリング:
アクション: 1 ページ進むと 2016 年の第 1 週が表示され、1 ページ戻ると 2016 年の第 1 週が表示されます。 3, 2016
アクション 2: 日付とデータの関連付け
html:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--mui--> <link rel="stylesheet" href="../css/mui.css"> <script src="../js/mui.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../js/common/common.js"></script> <script src="../js/chatted_analyse/information_week.js"></script> <link rel="stylesheet" href="../css/integral_active/integral.active.css"> <style> .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 20px; } @media only screen and (min-width: 320px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 28px; } } @media only screen and (min-width: 360px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 33px; } } @media only screen and (min-width: 375px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 38px; } } @media only screen and (min-width: 414px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 44px; } } .ReportDiv{ width: 100%; float: left; height: 300px; margin-top: 60px; } .headerDiv { background-color: #efeff4; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">周聊天消息分析</h1> </header> <!--日期的容器--> <div class="headerDiv"> <div id="previousDiv" class="previousImgDiv"></div> <div id="nextDiv" class="unNextImgDiv" ></div> <div id="headerTitleDiv" class="titleDiv"><input id="title" type="text" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;"/></div> </div> <!--图表的容器--> <div id="scroll_view" class="mui-scroll-wrapper" style="top:44px"> <div id="warp" class="mui-scroll"> <div id="emptyDiv" class="emptyDiv" style="display: none;">暂无数据</div> <div id="pie_information_week" class="ReportDiv"></div> <div id="bar_information_week" class="ReportDiv"></div> </div> </div> <!--echarts--> <script src="../js/dist/echarts.js"></script> <script src="../js/dist/chart/bar.js"></script> <script src="../js/dist/chart/pie.js"></script> <script src="../js/dist/echarts-all.js"></script> </body> <script type="text/javascript"> mui.init(); mui('.mui-scroll-wrapper').scroll(); </script> </html> 非常に多くのコードがあるため、確認する必要があるのは 1 か所だけです。ここでは 3 か所を確認します。それぞれの DIV:
previousDiv 上一页ID
nextDiv 下一页ID
<strong>headerTitleDiv 日期容器ID 日期是需要放在input里的， ID为title日期的形式是day, input的type='text'，不可以是其它，否则，title不显示日期</strong>
<!--日期的容器--> <div class="headerDiv"> <div id="previousDiv" class="previousImgDiv"></div> <div id="nextDiv" class="unNextImgDiv" ></div> <div id="headerTitleDiv" class="titleDiv"><input id="title" type="text" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;"/></div> </div>
以下は JS 部分です:
1. カスタム変数
var previousDiv;var nextDiv;var headerTitleDiv;var title;//拼日期var currentWeek = theWeek();var defaultWeek = theWeek();var currentYear = theYear();var defautlYear = theYear();//监听上一页与下一页的点击事件var previousDivTapEvent;var nextDivTapEvent;
2.変数の初期化:
$(document).ready(function(){ previousDiv = document.getElementById('previousDiv'); nextDiv = document.getElementById('nextDiv'); headerTitleDiv = document.getElementById('headerTitleDiv'); title = document.getElementById('title'); title.value = formartWeek(); //给前一页加点击事件，并监听它 previousDiv.addEventListener('tap', previousDivTapEvent); $(title).on('input', function(){ if(this.value.length == 0){ this.value.length = formartWeek(new Date()); }else{ if(checkCanDoNext()){ fetchDate(); return; } } }); } 3. 前日のイベントをリッスンします (fetchDate(); 日付とデータを関連付けるメソッド。このメソッドを呼び出すことで、日付に関連付けられたデータを取得できます):
function previousDivTapEvent(){ resetNextEvent(); nextDiv.className = 'nextImgDiv'; title.value = getPreviousWeek(title.value); //fetchDate(); 日期与数据关联的方法，调用这个方法，可以取得与日期关联的数据 fetchDate();} 4. 次の日のイベントのリスニング:
function nextDivTapEvent(){ resetPreviousEvent(); title.value = getNextWeek(); fetchDate(); if(checkCanDoNext){ nextDiv.removeEventListener('tap',nextDivTapEvent); return; }} 5. 前の週を取得し、
function getPreviousWeek(){ //当前周减去一周currentWeek--; currentWeek--; if(currentWeek < 1){ currentYear--; currentWeek = 52; } return formartWeek();} を返します。 6. 次の週を取得し、 return
function getNextWeek(){ //当前周加上一周主是下一周 currentWeek ++; //如果当前周大于52周，满一年，当前年加一年，新的一年，第一周 if(currentWeek > 52){ currentYear ++; currentWeek = 1; } return formartWeek();} 7. 次のページにデータがある場合は、クリックして次のページに入ることができます。データがない場合は、ボタンをクリックできません。 🎜>8. 前のページのリスニング イベントをリセットします。まず、ボタンにイメージ クラスを追加します。
function checkCanDoNext(){ if(defaultWeek <= currentWeek && defautlYear <= currentYear){ title.value = formartWeek(); nextDiv.className = 'unNextImgDiv'; nextDiv.removeEventListener('tap',nextDivTapEvent); return true; }else{ resetNextEvent(); nextDiv.className = 'nextImgDiv'; return false; }}最初に元のイベントを削除し、新しいイベントを追加します
9.次のページのリスニング イベントをリセットします。方法は上記と同じです
function resetPreviousEvent(){ previousDiv.className = 'previousImgDiv'; previousDiv.removeEventListener('tap',previousDivTapEvent); previousDiv.addEventListener('tap',previousDivTapEvent);} 10. 日付をフォーマットして、カスタマイズされた方法で返します
function resetNextEvent(){ nextDiv.className = 'nextImgDiv'; nextDiv.removeEventListener('tap',nextDivTapEvent); nextDiv.addEventListener('tap',nextDivTapEvent);} 11.今年
function formartWeek(){ return currentYear + "年 第 " + currentWeek + "周";} 12. 現在の週を取得し、閏年の場合は 2 月の日数を計算します
function theYear(){ var now = new Date(); years = now.getFullYear(); return years;} 以上が当日の方法です。次の点に注意する必要があります。
function theWeek(){ var totalDays = 0; now = new Date(); years = now.getYear() if (years < 1000) years += 1900 var days = new Array(12); days[0] = 31; days[2] = 31; days[3] = 30; days[4] = 31; days[5] = 30; days[6] = 31; days[7] = 31; days[8] = 30; days[9] = 31; days[10] = 30; days[11] = 31; //判断是否为闰年，针对2月的天数进行计算 if (Math.round(now.getYear() / 4) == now.getYear() / 4) { days[1] = 29 } else { days[1] = 28 } if (now.getMonth() == 0) { totalDays = totalDays + now.getDate(); } else { var curMonth = now.getMonth(); for (var count = 1; count <= curMonth; count++) { totalDays = totalDays + days[count - 1]; } totalDays = totalDays + now.getDate(); } //得到第几周 var week = Math.round(totalDays / 7); return week;} HTML の入力タイプは
-
<div id="headerTitleDiv" class="titleDiv"><input id="title" type="text" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;"/></div>
のクリック イベントです。前のページと次のページで、データに関連付けられたメソッドを追加できます。クリックして次のページに入ると、対応するデータが自動的に取得されます。
$(title).on('input', function(){ if(this.value.length == 0){ this.value.length = formartWeek(new Date()); }else{ if(checkCanDoNext()){ fetchDate(); return; } } });声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。