Maison > Article > interface Web > Implémentation d'un calendrier simple en innerHtml en js

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

小云云original: 2018-03-12 16:42:361445parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Idées de mise en page de sites WebArticle suivant：Idées de mise en page de sites Web

Articles Liés

Voir plus