用jquery製作簡易日曆
阿新 • • 發佈:2019-01-12
html程式碼如下:
div align="center" id="divAll"> <table id="tab" border="1" cellpadding="0" cellspacing="10"> <tr> <td date="一月活動<br>這是一月活動"><h2>1</h2>JAN</td> <td date="二月活動<br>這是二月活動"><h2>2</h2>FER</td> <td date="三月活動<br>這是三月活動"><h2>3</h2>MAR</td> </tr> <tr> <td date="四月活動<br>這是四月活動"><h2>4</h2>APR</td> <td date="五月活動<br>這是五月活動"><h2>5</h2>MAY</td> <td date="六月活動<br>這是六月活動"><h2>6</h2>JUN</td> </tr> <tr> <td date="七月活動<br>這是七月活動"><h2>7</h2>JUL</td> <td date="八月活動<br>這是八月活動"><h2>8</h2>AUG</td> <td date="九月活動<br>這是九月活動"><h2>9</h2>SEP</td> </tr> <tr> <td date="十月活動<br>這是十月活動"><h2>10</h2>OCT</td> <td date="十一月活動<br>這是十一月活動"><h2>11</h2>NOV</td> <td date="十二月活動<br>這是十二月活動"><h2>12</h2>DEC</td> </tr> </table> <div id="div_on"></div> </div>
CSS樣式程式碼如下:
<style> *{ padding: 0; margin: 0; } body { background: #f6f9fc; font-family: arial; } div{ background-color: #ccc; width: 50%; } td{ background-color: black; color: white; } #tab{ margin: 0 auto; width: 30%; text-align: center; } #div_on{ width: 30%; height: 50px; background: #D6D6D6; margin: 0 auto; } </style>
JS程式碼如下:
var tdAlls = null,
divDom = null;
$(function(){
// initDom();
addEvent();
});
//function initDom(){
tdAlls=$('td'); //下面用不到的話這裡可以註釋掉
divDom=$('div_on');
//}
function addEvent(){
$('td').mouseover(function(){ //這裡可以用上面定義的變數名 也可以直接寫當前的賦值變數名($('td'))
$('td').css('color',"white");
$(this).css('color',"red");
var str=$(this).attr('date');
$('#div_on').html(str);
}).mouseout(function(){
$('td').css('color',"white");
$(this).css('color',"red");
});
}
執行結果:
當滑鼠移入字型變紅,下面div顯示當前單元格顯示的內容,當滑鼠移入另一個單元格,當前單元格變紅,原本單元格變回原來顏色