js 制作年历

朱雀 2022-06-15 12:58 82阅读 0赞

css学的好烂，只能靠多搞几个盒子来设布局

css部分

<style>
    ul div h2 li{
    	margin:0;
    	padding:0;
    }
    .active{
    	background:#FFF;
    }
    li{
    	list-style:none;
    	margin:0;
    	padding:0;
    	background:#36C;
    	float:left;
    }
    #tab{
    	width:400px;
    	height:420px;
    	margin: 0 auto;
    	background:#C9F;
    }
    #div1{
    	height:100px;
    	width:auto;
    	margin-left:-40px;
    }
    #div1 li{
    	text-align:center;
    	width:90px;
    	margin:5px 5px 0 5px;
    }
    #div2{
    	height:100px;
    	width:auto;
    	margin-top:10px;
    	margin-left:-40px;
    }
    #div2 li{
    	text-align:center;
    	width:90px;
    	margin:5px 5px 0 5px;
    }
    #div3{
    	height:100px;
    	width:auto;
    	margin-top:10px;
    	margin-left:-40px;
    }
    #div3 li{
    	text-align:center;
    	width:90px;
    	margin:5px 5px 0 5px;
    }
    </style>

body部分

<body>
    <div id="tab" class="calendar">
     	<ul>
        <div id="div1">
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>FER</p></li>
            <li><h2>3</h2><p>MAR</p></li>
            <li><h2>4</h2><p>APR</p></li>
         </div>
         <div id="div2">
            <li><h2>5</h2><p>MAY</p></li>
            <li><h2>6</h2><p>JUN</p></li>
             <li><h2>7</h2><p>JUL</p></li>
             <li><h2>8</h2><p>AUG</p></li>
         </div>
         <div id="div3">
            <li><h2>9</h2><p>SEP</p></li>
            <li><h2>10</h2><p>OCT</p></li>
            <li><h2>11</h2><p>NOV</p></li>
            <li><h2>12</h2><p>DEC</p></li>
        </div>
        </ul>
        
       <div id="msg" class="text">
        	<h2>1月</h2>
            <p>哈哈哈</p>
        </div>
    </body>

js部分

<script>
    window.onload = function()
    {
    	var div = document.getElementById('tab');
    	var liarr = div.getElementsByTagName('li');
    	var top = div.getElementsByTagName('div')[3];
    	var data=['1','2','3','4','5','6','7','8','9','10','11','12'];
    	for (var i=0; i<liarr.length; i++)
    	{
    		liarr[i].id = i;
    		liarr[i].onmouseover = function(){
    			for (var j=0; j<liarr.length; j++){
    				liarr[j].className = '';
    			}
    			this.className = 'active';
    			top.innerHTML = '<h2>'+data[this.id]+'</h2>'+'月';
    		};
    	}
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 js制作弹窗

人见解，欢迎大家一起交流学习n(\*≧▽≦\*)n 效果图： ![2019091016350945.gif][] **html页面** <body> ...

不念不忘少年蓝@/ 2024年04月18日 18:40/ 0 赞/ 87 阅读

相关 js制作分页

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910112111185.gif][] **图标引入方式为symbol引用** **html:**...

偏执的太偏执、/ 2024年04月18日 17:33/ 0 赞/ 72 阅读

相关 js秒表制作

效果图如下：![在这里插入图片描述][20200329151800260.gif] <!DOCTYPE html> <html lang="en">

妖狐艹你老母/ 2023年07月18日 15:30/ 0 赞/ 12 阅读

相关 js制作简易计算器

制作能进行加减乘除的简易计算器，主要是练习动态注册事件。因以练习为主，所以包含了较多基础方法。效果图 ![20191011122912532.gif][] 代码

╰+哭是因爲堅強的太久メ/ 2023年06月06日 10:50/ 0 赞/ 95 阅读

相关 js制作返回顶部

页面返回顶部有很多漂亮的形式，今天这里分享一个返回顶部的两个小动画。效果一： ![在这里插入图片描述][20200622190305716.gif] 效果而： !

深碍√TFBOYSˉ_/ 2023年02月20日 03:04/ 0 赞/ 18 阅读

相关 JS -制作随机点名册案例

点名册效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

朴灿烈づ我的快乐病毒、/ 2023年01月05日 05:14/ 0 赞/ 156 阅读

相关 js制作简单计算器

在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！先看看效果 ![在

电玩女神/ 2022年11月12日 01:45/ 0 赞/ 230 阅读

相关 js-for循环制作乘法表

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

喜欢ヅ旅行/ 2022年11月05日 12:49/ 0 赞/ 161 阅读

相关简易年历卡

![简易年历卡][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta c

秒速五厘米/ 2022年06月16日 12:30/ 0 赞/ 78 阅读

相关 js 制作年历

css学的好烂，只能靠多搞几个盒子来设布局 css部分 <style> ul div h2 li{ margin:0; padding:

朱雀/ 2022年06月15日 12:58/ 0 赞/ 83 阅读