Home >Web Front-end >JS Tutorial >JS implements calendar production

JS implements calendar production

零到壹度Original: 2018-04-08 18:03:443090browse

This article shares with you the use of JS to create calendars. It is very detailed and practical. It is suitable for beginners. Friends in need can refer to .

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

Related recommendations:

##CSS+HTML Calendar Production

Use javaScript to make a calendar

Calendar made with html

The above is the detailed content of JS implements calendar production. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the use of created method in vue.jsNext article：Detailed explanation of the use of created method in vue.js

See more

JS implements calendar production

Related articles