• 简易年历


    利用原生js我们可以做一个简易的年历。

    效果如下图所示:

    css代码如下:

    <style type="text/css">
    * { padding: 0; margin: 0; }
    li { list-style: none; }
    body { background: #f6f9fc; font-family: arial; }
    
    .calendar {  210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
    .calendar ul {  210px; overflow: hidden; padding-bottom: 10px; }
    .calendar li { float: left;  58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
    .calendar li h2 { font-size: 20px; padding-top: 5px; }
    .calendar li p { font-size: 14px; }
    
    .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
    .calendar .active p { font-weight: bold; }
    
    .calendar .text {  178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
    .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
    .calendar .text p { font-size: 12px; line-height: 18px; }
    
    </style>
    

     html 结构如下:

    <div id="tab" class="calendar">
    
        <ul id="box">
            <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>
            <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>
            <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>
        </ul>
        
        <div class="text" id="txt">
            <h2>1月活动</h2>
            <p>快过年了,大家可以商量着去哪玩吧~</p>
        </div>
    

      JS代码如下:

    <script type="text/javascript">
    // 把每个月的日历内容放到数组里,动态添加
    	var arr=['快过年了,大家可以商量着去哪玩吧~',
    		'大家好好学习吧222222~~~',
    		'大家好好学习吧222222333~~~',
    		'大家好好学习吧222444222~~~',
    		'大家好好学习555吧222222~~~',
    		'大家好好学习吧666222222~~~',
    		'大家好好学习吧227772222~~~',
    		'大家好好学习吧28888822222~~~',
    		'大家好好学习吧99999222222~~~',
    		'大家好好学习10000000吧222222~~~',
    		'大家好好学习吧111111222222~~~',
    		'大家好好学习吧22222200000000000~~~']
    	
    //获取dom元素,
    		var oUl=document.getElementById('box');
    		var aLi=oUl.children;
    		var oDiv=document.getElementById('txt');
    //遍历每一个li
    		for(var i = 0 ; i < aLi.length; i++){
    //在遍历每一个li对象时给它添加一个属性,用来保存这个li的下标
    			aLi[i].ee=i;
    //给每一个li添加点击事件		
    			aLi[i].onclick=function(){
    //点击每一个li时将当前点击对象的ee属性的值赋值给xiabiao这个变量来保存
    				var xiabiao=this.ee;
    //在点击事件发生后再次遍历每一个li目的是让每一个li的类名为空
    				for(var j=0;j<aLi.length;j++){
    					aLi[j].className=''
    				}
    //但是当前点击对象的类名为"active";				
    				aLi[xiabiao].className='active';
    //odiv是一个伪数组,在点击事件发生后动态添加日历框里的内容,因为下标是从0开始所以这里加1;
    
    				oDiv.children[0].innerHTML=(xiabiao+1)+'月活动';
    				oDiv.children[1].innerHTML=arr[xiabiao]
    			}
    		}
    

      

  • 相关阅读:
    X的平方根(二分)
    JavaScript(1)
    入门训练 Fibonacci数列 (水题)
    set集合容器
    deque双端队列容器
    回归分析
    cf1121d 尺取
    CF1121C 模拟
    poj3662 二分+最短路
    最短路小结
  • 原文地址:https://www.cnblogs.com/MikePan/p/9123182.html
Copyright © 2020-2023  润新知