JS实现日历制作-js教程-PHP中文网

JS实现日历制作

零到壹度

发布： 2018-04-08 18:03:44

原创

3362人浏览过

本文给大家分享的是使用js实现日历制作，非常的详细，也很实用，适合初学者，有需要的小伙伴参考下。

<!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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2336">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175937519917802.png" alt="一键职达">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2336">一键职达</a>
                            <p>AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="一键职达">
                                <span>265</span>
                            </div>
                        </div>
                        <a href="/ai/2336" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="一键职达">
                        </a>
                    </div>
                </li>
        <li>11月<p>Nov</p></li>
        <li>12月<p>Dec</p></li>
    </ul>
    <p id="action"></p>
</p>
</body>
</html>

登录后复制