欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js之innerHtml简易日历的实现

程序员文章站 2022-04-07 08:27:36
...

本文主要和大家分享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>

相关推荐:

js最简单的原生日历

分享一个日历的实现方法

JS实现一个简单的日历

以上就是js之innerHtml简易日历的实现的详细内容,更多请关注其它相关文章!