suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung eines einfachen Kalenders in innerHtml in js

Implementierung eines einfachen Kalenders in innerHtml in js

小云云
小云云Original
2018-03-12 16:42:361445Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ideen für Website-PagingNächster Artikel：Ideen für Website-Paging

In Verbindung stehende Artikel

Mehr sehen