ページめくり効果を「週」単位で2016週2_html/css_WEB-ITnoseとして表示-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ページめくり効果を「週」単位で2016週2_html/css_WEB-ITnoseとして表示

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:00 AM

最初のレンダリング:

アクション: 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 id="周聊天消息分析">周聊天消息分析</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>
```
のクリックイベントです。前のページと次のページで、データに関連付けられたメソッドを追加できます。クリックして次のページに入ると、対応するデータが自動的に取得されます。

3. タイトルに入力イベントを追加する場合は、次のものが必要です。判定を書きます: 現在値 = 週の日付の戻りメソッド。次のページにデータがある場合は、クリックして次のページに移動できます:

$(title).on('input', function(){        if(this.value.length == 0){            this.value.length = formartWeek(new Date());        }else{            if(checkCanDoNext()){                fetchDate();                return;            }        }    });

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PM

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は？Apr 30, 2025 pm 03:09 PM

Three.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...

お使いの携帯電話でネイティブセレクトを使用する場合、どのような問題が発生しますか？Apr 30, 2025 pm 03:06 PM

モバイルデバイスでアプリケーションを開発する際に携帯電話でネイティブセレクトの問題は、ユーザーが選択を行う必要があるシナリオに遭遇することがよくあります。ネイティブセル...

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、