JS implémente la production de calendrier-js tutoriel-php.cn

JS implémente la production de calendrier

零到壹度

Libérer： 2018-04-08 18:03:44

original

3019 Les gens l'ont consulté

Cet article vous explique comment utiliser JS pour créer un calendrier. Il est très détaillé et pratique. Il convient aux amis dans le besoin qui peuvent s'y référer. 🎜>.

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

Copier après la connexion

Recommandations associées :

Production de calendriers CSS+HTML

Calendrier réalisé avec javaScript

Calendrier réalisé avec html

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!