ホームページ > 記事 > ウェブフロントエンド > js innerHtmlでのシンプルなカレンダーの実装

js innerHtmlでのシンプルなカレンダーの実装

小云云オリジナル: 2018-03-12 16:42:361445ブラウズ

この記事では主に js での innerHtml でのシンプルなカレンダーの実装について説明します。このアイデアはタブのアイデアと似ています。

1. 下部のテキストを変更するには、配列を使用し、その内容を配列に入れ、文字列の連結を使用してそれを実現します
2. ラベル内のテキストを設定するには、innerHtml を使用します。入力内のテキスト値を設定するために使用されます
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 = [            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,
            ]            var oTable = document.getElementById(&#39;table&#39;);            var oLi = oTable.getElementsByTagName(&#39;li&#39;);            var op1 = document.getElementById(&#39;p1&#39;);            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=&#39;&#39;;
                    }                    this.className=&#39;active&#39;;
                    op1.innerHTML=&#39;<h2>&#39;+(this.index+1)+&#39;月</h2><p>&#39;+oText[this.index] +&#39;</p>&#39;;
                }
            }
        }    </script>
    <body>
        <p id=&#39;table&#39;>
            <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=&#39;p1&#39;>
            <h2>一月</h2>
            <p>稻花香提醒您，七月值得关注的日子</p>
        </p>
    </body></html>

js innerHtmlでのシンプルなカレンダーの実装

関連記事