JS implementiert die Kalenderproduktion-js-Tutorial-php.cn

JS implementiert die Kalenderproduktion

零到壹度

Freigeben： 2018-04-08 18:03:44

Original

3057 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!