JS制作日历

最新推荐文章于 2024-07-27 18:37:51 发布

杨亚仑

最新推荐文章于 2024-07-27 18:37:51 发布

阅读量547

点赞数 1

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/yangyalun/article/details/79855568

版权

JavaScript学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<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 oDiv=document.getElementById("time");
            var aLI=oDiv.getElementsByTagName("li");
            var oDiv1=document.getElementById("action");
            for(var i=0;i<aLI.length;i++) {
               aLI[i].index=i;
                aLI[i].onmousemove=function(){
                    oDiv1.innerHTML=sz[this.index]+"月活动，大家快来玩吧";
                }
            }

        }

    </script>
</head>
<body>
<div 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>
    <div id="action"></div>
</div>
</body>
</html>