Implémentation d'un calendrier simple en innerHtml en js-js tutoriel-php.cn

Implémentation d'un calendrier simple en innerHtml en js

小云云

Libérer： 2018-03-12 16:42:36

original

1434 Les gens l'ont consulté

Cet article partage principalement avec vous l'implémentation d'un calendrier simple en innerHtml en js. L'idée est similaire à celle des onglets. J'espère que cela pourra aider tout le monde.

1. Pour modifier le texte du bas, vous pouvez utiliser un tableau, placer son contenu dans un tableau, puis utiliser la concaténation de chaînes pour y parvenir
2. innerHtml est utilisé pour définir le texte. l'étiquette et la valeur sont utilisées pour définir la valeur du texte dans l'entrée
3. Pour la connexion par chaîne, afin d'éviter que les chiffres et les lettres ne soient connectés ensemble, vous pouvez utiliser des parenthèses. Autrement dit, la priorité de l'addition en mathématiques est la même

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

Copier après la connexion

Recommandations associées :

Le calendrier natif le plus simple de JS

Partagez comment implémenter un calendrier

JS implémente un calendrier simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!