以 “周” 为单位的可以翻页的效果显示为 2016年第2周_html/css

首页

web前端

html教程

以 “周” 为单位的可以翻页的效果显示为 2016年第2周_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:00 AM

先上效果图：

动作：向前翻一页，显示为 2016年第1周；向后翻一页，显示为 2016年第3周

动作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>

这么多代码只要看一个地方就OK了，这里有三个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、获取下一周，并返回

function getNextWeek(){    //当前周加上一周主是下一周    currentWeek ++;    //如果当前周大于52周，满一年，当前年加一年，新的一年，第一周    if(currentWeek > 52){        currentYear ++;        currentWeek = 1;    }    return formartWeek();}

7、判断，如果下一页有数据，则，可以点击进入下一页，如果没有数据，按钮不可点击

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;    }}

8、重置上一页的监听事件，先给按钮加一个图片class;

先删除原来的事件，再加上新的事件

function resetPreviousEvent(){    previousDiv.className = 'previousImgDiv';    previousDiv.removeEventListener('tap',previousDivTapEvent);    previousDiv.addEventListener('tap',previousDivTapEvent);}

9、重置下一页的监听事件，方法同上

function resetNextEvent(){    nextDiv.className = 'nextImgDiv';    nextDiv.removeEventListener('tap',nextDivTapEvent);    nextDiv.addEventListener('tap',nextDivTapEvent);}

10、格式化日期，以自定义方式返回

function formartWeek(){    return currentYear + "年 第 " + currentWeek + "周";}

11、获取当前年份

function theYear(){    var now = new Date();    years = now.getFullYear();    return years;}

12、获取当前周，并判断是否为闰年，针对2月的天数进行计算

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中input的类型为text

<div id="headerTitleDiv" class="titleDiv"><input id="title" type="text" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;"/></div>

2. 前一页与后一页的点击事件中，可以加入与数据关联的方法，在点击进入下一页时，自动获取相应的数据

3. 给title添加input事件时，需要写一个判断：当前值 = 周日期的返回的方法。如果下一页有数据，才可以点击进入下一页：

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

＆gt; gt;的目的是什么元素？Mar 21, 2025 pm 12:34 PM

本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati

＆lt; datalist＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:33 PM

本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159

＆lt; meter＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:35 PM

本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前

视口元标签是什么？为什么对响应式设计很重要？Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。

HTML5中跨浏览器兼容性的最佳实践是什么？Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践，重点是特征检测，进行性增强和测试方法。

我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM

本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit

如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。

＆lt; iframe＆gt;的目的是什么。标签？使用时的安全考虑是什么？Mar 20, 2025 pm 06:05 PM

本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。

See all articles

热AI工具

热工具

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中