calendar小例子

效果如图:

1.主要是利用localstorage.setItem("key","vlaue");

2.以及还有很多浏览器不支持的grid布局(在最新版的chrome可看到,360最新版都看不到~~~)

<style>
        .box{
            display: grid;
             grid-template-columns: 14.285% 14.285% 14.285% 14.285% 14.285% 14.285% 14.285%;
             grid-template-rows: 100px 100px 100px 100px 100px;
        }
        .box_item{
            border: 1px solid #ccc;
        }
        /*.box1{
            grid-column:2/3; //第二列和第三列纵轴线
            grid-row:1/2; //第一行和第二行横州线
        }
        .box2{
            grid-column:5/6;
            grid-row:2/3;
        }*/
        .box_item{
            font-size: 2em;
            text-align: center;
            display:grid;
            align-content: center; 
            position: relative;
        }
        .box_item p{
            position: absolute;
            font-size: 10px;
            margin: 0;
        }
        .box_item:nth-child(odd){
            background-color: #fbfbfb;
        }
        .box_item:nth-child(even){
            background-color: #f1f1f1;
        }
    </style>

    <h3 style="font-size: 3em;text-align: center;">Calendar</h3>
    <div class="box">
        <div class="box_item box1">1</div>
        <div class="box_item box2">2</div>
        <div class="box_item box3">3</div>
        <div class="box_item box4">4</div>
        <div class="box_item box5">5</div>
        <div class="box_item box6">6</div>
        <div class="box_item box7">7</div>
        <div class="box_item box8">8</div>
        <div class="box_item box9">9</div>
        <div class="box_item box10">10</div>
        <div class="box_item box11">11</div>
        <div class="box_item box12">12</div>
        <div class="box_item box13">13</div>
        <div class="box_item box14">14</div>
        <div class="box_item box15">15</div>
        <div class="box_item box16">16</div>
        <div class="box_item box17">17</div>
        <div class="box_item box18">18</div>
        <div class="box_item box19">19</div>
        <div class="box_item box20">20</div>
        <div class="box_item box21">21</div>
        <div class="box_item box22">22</div>
        <div class="box_item box23">23</div>
        <div class="box_item box24">24</div>
        <div class="box_item box25">25</div>
        <div class="box_item box26">26</div>
        <div class="box_item box27">27</div>
        <div class="box_item box28">28</div>
        <div class="box_item box29">29</div>
        <div class="box_item box30">30</div>
        <div class="box_item box31">31</div>
    </div>
    <div class="inp">
        <input type="text" placeholder="please input the event !" style=" 50%;height: 40px;"><input type="button" value="submit" style="height: 45px;">
    </div>

<script>
        var box = document.getElementsByClassName("box");
        var box_item = box[0].children;
        var inp_txt = document.getElementsByTagName("input")[0];
        var inp_sub = document.getElementsByTagName("input")[1];
        var date = new Date();
        var num = date.getDate();
        var line_height=0;
        var index =localStorage.length;
        // 设置为localstorage数据项的长度,为了使刷新页面的时候也是从最后一项开始继续保存数据
        console.log(num)
        inp_sub.onclick=function(e){
            ok();
        }
        window.onkeyup=function(e){
            if(window.event.keyCode == 13){
                // 判断是否按了enter键
                ok();
                inp_txt.value="";
                // 将输入框的value值清空
            }
        }
        function ok(){
            var val = inp_txt.value;
            var newELe = document.createElement("p");
            newELe.innerHTML=val;
            box_item[num].appendChild(newELe);
            line_height+=10;
            newELe.style.top +=line_height+"px";
            index++;
            localStorage.setItem("event"+index,val);
            // 将数据保存到localstorage
        }
        window.onload=function(){
            for(var i=1;i<localStorage.length+1;i++){
                event =localStorage.getItem("event"+i);
                // 取数据
                var newELe =document.createElement("p");
                newELe.innerHTML=event;
                line_height+=10;
                newELe.style.top +=line_height+"px";
                box_item[num].appendChild(newELe);
            }
        }
    </script>