JS制作日历

<!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>
 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //创建一个数组,用于存放每个的天数 function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)  { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } //实现历 function calendar() { var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); year = today.getYear() +1900; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>")  document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>") document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>"); document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>"); var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1","2","3","4","5","6","7","8","9","10","11","12"); var now = new Date(); document.writeln("<FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>"); document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>"); document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>"); document.writeln("</TR><TR>"); column = 0; for (i=0; i<startDay; i++) { document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>"); column++; } for (i=1; i<=nDays; i++) { if (i == thisDay) { document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>") } else { document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>"); } document.writeln(i); if (i == thisDay) document.writeln("</FONT></TD>") column++; if (column == 7) { document.writeln("<TR>");  column = 0; } } document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>") document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9pt;Color:#ffffff'>") document.writeln(" 现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>") document.writeln("</TD></TR></TABLE></div>"); } </SCRIPT>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值