Implementierung eines einfachen Kalenders in innerHtml in js-js-Tutorial-php.cn

Implementierung eines einfachen Kalenders in innerHtml in js

小云云

Freigeben： 2018-03-12 16:42:36

Original

1392 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Implementierung eines einfachen Kalenders in innerHtml in js mit. Die Idee ähnelt der von Tabs. Ich hoffe, dass sie allen helfen kann.

1. Um den unteren Text zu ändern, können Sie ein Array verwenden, dessen Inhalt in ein Array einfügen und dann die Zeichenfolgenverkettung verwenden, um dies zu erreichen.
2. Legen Sie den Text fest Die Bezeichnung und der Wert werden verwendet, um den Textwert in der Eingabe festzulegen
3. Um zu verhindern, dass Zahlen und Buchstaben miteinander verbunden werden, können Sie bei der Zeichenfolgenverbindung Klammern verwenden. Das heißt, die Priorität der Addition in der Mathematik ist dieselbe

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

JS‘ einfachster nativer Kalender

Teilen Sie mit, wie Sie einen Kalender implementieren

JS implementiert einen einfachen Kalender

Das obige ist der detaillierte Inhalt vonImplementierung eines einfachen Kalenders in innerHtml in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!