Heim > Artikel > Web-Frontend > JS implementiert die Kalenderproduktion

JS implementiert die Kalenderproduktion

零到壹度Original: 2018-04-08 18:03:442938Durchsuche

Dieser Artikel zeigt Ihnen, wie Sie mit JS einen Kalender erstellen. Er ist für Anfänger geeignet .

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./系统CSS初始化.css">
    <style>     
       li{            
           width: 50px;            
           height: 50px;            
           background: black;            
           color: white;            
           margin: 5px;            
           float: left;            
           text-align: center;            
           line-height: 23px;
        }        
        #time{     
            position: relative;            
            top: 150px;            
            width: 180px;            
            height: 300px;            
            background: #686868;           
            margin: 0 auto;
        }        
        #action{      
           clear: both;           
           width: 160px;           
           height: 50px;            
           position: relative;            
           left: 10px;            
           background: snow;
        }       
        li:hover{       
           background: orange;            
           color: black;
        }
    </style>
    <script>     
       window.onload=function (ev) {      
             var sz=[1,2,3,4,5,6,7,8,9,10,11,12];            
             var op=document.getElementById("time");            
             var aLI=op.getElementsByTagName("li");            
             var op1=document.getElementById("action");            
             for(var i=0;i<aLI.length;i++) {         
                   aLI[i].index=i;          
                         aLI[i].onmousemove=function(){             
                                op1.innerHTML=sz[this.index]+"月活动，大家快来玩吧";
                }
            }
        }
    </script>
</head>
<body>
<p id="time">
    <ul>
        <li>1月<p>Jan</p></li>
        <li>2月<p>Feb</p></li>
        <li>3月<p>Mar</p></li>
        <li>4月<p>Apr</p></li>
        <li>5月<p>May</p></li>
        <li>6月<P>Jun</P></li>
        <li>7月<p>Jul</p></li>
        <li>8月<p>Aug</p></li>
        <li>9月<p>Sep</p></li>
        <li>10月<p>Oct</p></li>
        <li>11月<p>Nov</p></li>
        <li>12月<p>Dec</p></li>
    </ul>
    <p id="action"></p>
</p>
</body>
</html>

Verwandte Empfehlungen:

CSS+HTML-Kalenderproduktion

Kalender erstellt mit JavaScript

Kalender erstellt mit HTML

Das obige ist der detaillierte Inhalt vonJS implementiert die Kalenderproduktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html JS

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：Detaillierte Erläuterung der Verwendung der erstellten Methode in vue.jsNächster Artikel：Detaillierte Erläuterung der Verwendung der erstellten Methode in vue.js

In Verbindung stehende Artikel

Mehr sehen