js之innerHtml简易日历的实现-js教程-PHP中文网

js之innerHtml简易日历的实现

小云云

发布： 2018-03-12 16:42:36

原创

1554人浏览过

本文主要和大家分享js之innerHtml简易日历的实现，思路同选项卡差不多，希望能帮助到大家。

1、对于最下面文字的更改，可以使用数组，把他们的内容都放到一个数组中，然后使用字符串的拼接来实现
2、innerhtml是用来设置标签内的文字，而value是用来设置input中的文字值
3、对于字符串连接，为了不使数字和字母连在一起，可以使用括号括起来。即同数学中的加法的优先级一样

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>简易日历</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;}
        #p1{width: 200px;height:150px;border:1px solid forestgreen ;text-align: center;margin-left: 20px;}
    </style>
    <script>
        window.onload=function(){
            var oText = [            '天气很好呀，要开心',            '没有下雨，要开心',            '每天要开心',            '天气很好呀，要开心',            '没有下雨，要开心',            '每天要开心',            '天气很好呀，要开心',            '没有下雨，要开心',            '每天要开心',            '天气很好呀，要开心',            '没有下雨，要开心',            '每天要开心',
            ]            var oTable = document.getElementById('table');            var oLi = oTable.getElementsByTagName('li');            var op1 = document.getElementById('p1');            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';
                    op1.innerHTML='<h2>'+(this.index+1)+'月</h2><p>'+oText[this.index] +'</p>';
                }
            }
        }    </script>
    <body>
        <p 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>
        </p>
        <p id='p1'>
            <h2>一月</h2>
            <p>稻花香提醒您，七月值得关注的日子</p>
        </p>
    </body></html>

登录后复制