js simple calendar innerHtml

matters needing attention:
The idea is similar to the tab,
1. For the change of the bottom text, you can use array, put their contents into an array, and then use string splicing to achieve
2. innerHtml is used to set the text in the tag, while value is used to set the text value in the input
3. For string concatenation, to keep numbers and letters from joining together, use parentheses. That is, it has the same priority as the addition in mathematics

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Simple calendar</title>
    </head>
    <style>
        #table ul{width: 200px;height:220px ;}
        #table li{float: left;width:50px;height:50px ;border: 1px solid blue;margin-right: 5px;
        list-style-type: none;text-align: center;margin-top: 5px;}
        #table .active{background-color: #0000FF;cursor: pointer;}
        #div1{width: 200px;height:150px;border:1px solid forestgreen ;text-align: center;margin-left: 20px;}
    </style>
    <script>
        window.onload=function(){
            var oText = [
            'It's a fine day. Have fun',
            'No rain, have fun',
            'Be happy every day',
            'It's a fine day. Have fun',
            'No rain, have fun',
            'Be happy every day',
            'It's a fine day. Have fun',
            'No rain, have fun',
            'Be happy every day',
            'It's a fine day. Have fun',
            'No rain, have fun',
            'Be happy every day',
            ]
            var oTable = document.getElementById('table');
            var oLi = oTable.getElementsByTagName('li');
            var oDiv1 = document.getElementById('div1');
            for(var i=0;i<oLi.length;i++){
                oLi[i].index = i;
                oLi[i].onmousemove=function(){
                    for(var i=0;i<oLi.length;i++){
                        oLi[i].className='';
                    }
                    this.className='active';
                    oDiv1.innerHTML='<h2>'+(this.index+1)+'month</h2><p>'+oText[this.index] +'</p>';
                }
            }
        }
    </script>
    <body>
        <div id='table'>
            <ul>
                <li class="active"><h2>1</h2></li>
                <li><h2>2</h2></li>
                <li><h2>3</h2></li>
                <li><h2>4</h2></li>
                <li><h2>5</h2></li>
                <li><h2>6</h2></li>
                <li><h2>7</h2></li>
                <li><h2>8</h2></li>
                <li><h2>9</h2></li>
                <li><h2>10</h2></li>
                <li><h2>11</h2></li>
                <li><h2>12</h2></li>
            </ul>
        </div>
        <div id='div1'>
            <h2>January</h2>
            <p>Daohuaxiang reminds you of the noteworthy days in July</p>
        </div>
    </body>
</html>

Posted on Wed, 01 Apr 2020 07:04:00 -0700 by sundru