JS实现简易日历过程中遇到的问题和原因以及解决方式。

来源：互联网发布：php从入门到精通编辑：程序博客网时间：2024/05/01 00:41

下面是部分代码，主要错误在css样式部分（改错前）

html

<div id="container">    <ul>        <li class="active"><h1>1月</h1><p>JAN</p></li>        <li><h1>2月</h1><p>FEB</p></li>        <li><h1>3月</h1><p>MAR</p></li>        <li><h1>4月</h1><p>APR</p></li>        <li><h1>5月</h1><p>MAY</p></li>    </ul>    <div class="notes" style="display:block;">        <h1>1月活动</h1>        <p>快过年了！大家去干点啥呢？~</p>    </div></div>

css样式

ul li{    width: 100px;    height: 100px;    background-color: #40403F;    list-style: none;    text-align: center;    margin: 11px;    float: left;    color: white;}ul li:hover{    background-color: white;    color: #FF95BC;    border: 1px solid gray;}

js

window.onload = function (){    var myArr = [        '快过年了！大家去干点啥呢？~',        '二月了，干点啥好呢？？？哈哈哈~开学快乐',        '阳春三月！走走走去春游~',        '四月嘛，好好学习进实验室，哈哈哈~',        '啦啦啦~五月啦！劳动假，走起！'    ];    var myLi = document.getElementsByTagName('li');    var myNotes = document.getElementById('container').getElementsByTagName('div')[0];    for (var i = 0; i < myLi.length; i++) {        myLi[i].index = i;        myLi[i].onmouseover = function(){            for(i = 0;i < myLi.length; i++){                myLi[i].className = '';            }            this.className = 'active';            myNotes.innerHTML = '<h1>'+(this.index+1)+'月活动</h1><p>'+ myArr[this.index] +'</p>';        };    }}

这部分代码的bug会这样显示：

鼠标覆盖在前两列的时候会导致下一行的格子统一向下向右移。

==这是因为我在hover之前并没有给它加border边框，所以在hover的时候如果加了border边框就会导致下一行的格子不能如期放在它该放的位置。这又是为什么呢，因为每一个li都有它唯一确定的高度和宽度，而hover上去宽和高都会多出两个像素，所以下一行的每一个li肯定不能放下，只能从多出的两个像素的位置开始摆放。但是最后一列却又似乎是对的是为什么呢？这是因为最后一列的hover上去超出两个像素影响的是下一行所有的li，而我们肉眼对两个像素又不能清楚分辨出来，所以感觉是对的，而实际上它是整体向下移动了。==

那么该如何解决这个问题呢？很简单，就只需要在hover之前也给它加上和hover之后的border边框就行。

改正后的代码

0 0