安然不哭-西坝阿超个人博客

做技术一定要一颗恒心,这样才不会半途而废。

js 星期操作

2018-7-31 钟建超

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     
    td{
     
        border:1px solid;
    }
     
    button{
     
        margin: 5px;
    }
         
    </style>
    <script>
        window.onload = function(){
         
            var cells = document.getElementById('monitor').getElementsByTagName('td');
            var clen = cells.length;
            var currentFirstDate;
            var formatDate = function(date){             
                var year = date.getFullYear()+'年';
                var month = (date.getMonth()+1)+'月';
                var day = date.getDate()+'日';
                var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
                return year+month+day+' '+week;
            };
            var addDate= function(date,n){       
                date.setDate(date.getDate()+n);        
                return date;
            };
            var setDate = function(date){             
                var week = date.getDay()-1;
                date = addDate(date,week*-1);
                currentFirstDate = new Date(date);
                for(var i = 0;i<clen;i++){                 
                    cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1));
                }                 
            };             
            document.getElementById('last-week').onclick = function(){
                
                setDate(addDate(currentFirstDate,-7));         
            };
             
            document.getElementById('next-week').onclick = function(){
                 
                setDate(addDate(currentFirstDate,7));
            };
             
            setDate(new Date());
        }
    </script>
</head>
<body>
    <button id="last-week">上一周</button><button id="next-week">下一周</button>
    <table id="monitor">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

标签: html js