zoukankan      html  css  js  c++  java
  • JS单日的日历(上一天、下一天)

    最近在做这个手机页面 ,  饼图均是用CSS3实现的。日期切换 JS代码如下(自己写的,轻测无BUG):

    贴代码进来后居然直接可以预览;:下面是效果(可以点击哦)

     JS单日的日历(上一天、下一天):

    日历

    < 当前日期 >

     代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>日历</title>
    <style>
    span:first-child,
    span:last-child{display: inline-block;background: #ccc; 20px;text-align: center;}
    </style>
    </head>
    <body>
    <div id="date">
    <span><</span>
    <span>当前日期</span>
    <span>></span>
    </div>
    <script type="text/javascript">
    // 获取页面UI
    var date_view = document.getElementById('date'),
    btn_prev = date_view.getElementsByTagName('span')[0],
    date_text = date_view.getElementsByTagName('span')[1],
    btn_next = date_view.getElementsByTagName('span')[2];

    // 获取时间
    var d = new Date(),
    year = d.getFullYear(),
    month = d.getMonth() + 1,
    date = d.getDate();

    date_text.innerHTML = year + '年' + month + '月' + date + '日';

    btn_prev.onclick = function(){
    date--
    month_pd()
    date_text.innerHTML = year + '年' + month + '月' + date + '日';
    }
    btn_next.onclick = function(){
    date++
    month_pd()
    date_text.innerHTML = year + '年' + month + '月' + date + '日';
    }
    function month_pd(){
    function set_date(nd){
    if(date>nd){
    date = 1
    month = month+1
    if(month>12){month=1;year =year+1}
    }
    if(date<1){
    month = month-1
    if(month<1){month=12;year =year-1}
    date = new Date(year,month,0).getDate()
    }
    }
    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) isy = true;
    switch(month){
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
    set_date(31)
    break;
    case 4:
    case 6:
    case 9:
    case 11:
    set_date(30)
    break;
    case 2:
    if(isy){
    set_date(29)
    }else{
    set_date(28)
    }
    break;
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    codeforces 501 C,D,E
    bzoj 3172 单词 ac自动机|后缀数组
    HDU2459 后缀数组+RMQ
    POJ 3294 二分找超过一半字符串中存在的子串
    头文件
    python爬取文本
    python爬取图片
    NEW
    dsu on tree 练习题
    lzz分块+莫队
  • 原文地址:https://www.cnblogs.com/maixi/p/5178131.html
Copyright © 2011-2022 走看看