Requirements: The mouse hover shows what happened this month.
Events used are: onmouseover, onmouseout (the more silly method), the first time I think of this silly method. Moreover, display ing is not used, so it's a wonderful thing to make. However, my sister is a very good person, so she gave me some ideas, and today after reading the source code, I rewrite a calendar.
Using the window.onload= function (){} method, this method means that after loading the page, the anonymous function is executed, which is anonymous without a name.
Http://www.softwhy.com/forum.php?Mod=viewthread&tid=6191, you can learn about onload by referring to this link.
About the use of margin: how to write a single margin, you can add distance directly behind, but in the order of top left, bottom right;
For example, margin: 1px,2px,3px,4px means margin-top: 1px; margin-left: 2px; margin-bottom: 3px; margin-right: 4px;
Write what a div should contain: width, height, backgrouncolor, color, margin, padding, border
Color in css means font color, and backgroundcolor means background color
Label as far as possible do not write style, write in css, if written, the default unit is px do not write units
outline: Outside border. If you can't understand it, go out to the w3c to find a case.
Id: The hover attribute means pseudo-style, which means that when the mouse clicks on the div, the pseudo-style of the div will take effect.
Commonly used attributes: display, innerHTML, className, style result values are = connected!
id cannot be a number.
For the first time:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.out{
width: 300px;
height: 280px;
margin-left: 100px;
margin-top: 100px;
background-color: gainsboro;
}
.inner{
width: 80%;
height: 70%;
padding-top: 25px;
padding-left: 25px;
border: 1px;
border-color: red;
}
.a{
background-color: ghostwhite;
}
.a p{
display:none;
}
</style>
<script>
//p1
function block(){
document.getElementById("p1").style.display="block";
}
function out(){
document.getElementById("p1").style.display="none";
}
//p2
function block2(){
document.getElementById("p2").style.display="block";
}
function out2(){
document.getElementById("p2").style.display="none";
}
//p3
function block3(){
document.getElementById("p3").style.display="block";
}
function out3(){
document.getElementById("p3").style.display="none";
}
//p4
function block4(){
document.getElementById("p4").style.display="block";
}
function out4(){
document.getElementById("p4").style.display="none";
}
//p5
function block5(){
document.getElementById("p5").style.display="block";
}
function out5(){
document.getElementById("p5").style.display="none";
}
//p6
function block6(){
document.getElementById("p6").style.display="block";
}
function out6(){
document.getElementById("p6").style.display="none";
}
//p7
function block7(){
document.getElementById("p7").style.display="block";
}
function out7(){
document.getElementById("p7").style.display="none";
}
//p8
function block8(){
document.getElementById("p8").style.display="block";
}
function out8(){
document.getElementById("p8").style.display="none";
}
//p9
function block9(){
document.getElementById("p9").style.display="block";
}
function out9(){
document.getElementById("p9").style.display="none";
}
//p10
function block10(){
document.getElementById("p10").style.display="block";
}
function out10(){
document.getElementById("p10").style.display="none";
}
//p11
function block11(){
document.getElementById("p11").style.display="block";
}
function out11(){
document.getElementById("p11").style.display="none";
}
//p12
function block12(){
document.getElementById("p12").style.display="block";
}
function out12(){
document.getElementById("p12").style.display="none";
}
</script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="out">
<div class="inner">
<table width="100%" height="150" border="1" cellspacing="10">
<tr>
<td id="a1" onmouseover="block()" onmouseout="out()">1 JAN</td>
<td id="a2" onmouseover="block2()" onmouseout="out2()">2 FER</td>
<td id="a3" onmouseover="block3()" onmouseout="out3()">3 MAR</td>
<td id="a4" onmouseover="block4()" onmouseout="out4()">4 APR</td>
</tr>
<tr>
<td id="a5" onmouseover="block5()" onmouseout="out5()">5 MAR</td>
<td id="a6" onmouseover="block6()" onmouseout="out6()">6 JUN</td>
<td id="a7" onmouseover="block7()" onmouseout="out7()">7 JUL</td>
<td id="a8" onmouseover="block8()" onmouseout="out8()">8 AUG</td>
</tr>
<tr>
<td id="a9" onmouseover="block9()" onmouseout="out9()">9 SEP</td>
<td id="a10" onmouseover="block10()" onmouseout="out10()">10 Oct</td>
<td id="a11" onmouseover="block11()" onmouseout="out11()">11 NOV</td>
<td id="a12" onmouseover="block12()" onmouseout="out12()">12 DEC</td>
</tr>
</table>
<div class="a" >
<p id="p1">New Year's Day: Three days off from January 1 to 3.</p>
<p id="p2">Spring Festival: 7 days off from February 2 to 8.</p>
<p id="p3">"Women's Day: Women's Day, March 8, has nothing to do with me."</p>
<p id="p4">Tomb Sweeping Festival: 3 to 5 April.</p>
<p id="p5">Labor Day: 3 days off from April 30 to May 2.</p>
<p id="p6">Dragon Boat Festival: 4-6 June for 3 days.</p>
<p id="p7">Xiaoshu: Xiaoshu on July 7,No holidays.</p>
<p id="p8">Qixi Festival: Qixi Festival on August 6. No holidays.</p>
<p id="p9" >Mid-Autumn Festival: Sept. 10-12 is a three-day holiday.</p>
<p id="p10">National Day: 7 days off from October 1 to 7.</p>
<p id="p11">Lidong: Lidong on November 8. No holidays.</p>
<p id="p12">AIDS Day:12 January 1.<br>International Day for the Abolition of Slavery:12 February 2.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.all{
width: 300px;
padding: 5px;
background-color: #999999;
}
.out{
width:300px;
margin: 8px 0px;
}
.outter{
width: 280px;
height: 90px;
color: #000000;
margin: 10px;
font-size: 10px;
}
button{
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid black;
color: red;
font-weight: bold;
outline: none;
}
button:hover{
color: #000000;
background: blue;
}
span{
border: 1px solid burlywood;
font-size:19px ;
font-weight:bold;
}
</style>
<script>
window.onload=function(){
var span =document.getElementById("span");
var arr=[
"New Year's Day: Three days off from January 1 to 3.",
"Spring Festival: 7 days off from February 2 to 8.",
"Women's Day: Women's Day, March 8, has nothing to do with me.",
"Tomb Sweeping Festival: 3-5 April holidays",
"Labor Day: 3 days off from April 30 to May 2.",
"Dragon Boat Festival: 4-6 June for 3 days.",
"Xiaoshu: Xiaoshu on July 7. No holidays.",
"Qixi Festival: Qixi Festival on August 6. No holidays.",
"Mid-Autumn Festival: Sept. 10-12 is a three-day holiday.",
"National Day: 7 days off from October 1 to 7.",
"Lidong: Lidong on November 8. No holidays.",
"AIDS Day:12 Month 1<p/>International Day for the Abolition of Slavery:12 February 2."
];
for(var i=1;i<13;i++){
document.getElementById(i).onmouseover=function(){
span.innerHTML="<span>"+this.id+"Monthly Festival</span><p/>"+arr[this.id-1];
}
document.getElementById(i).onmouseout=function(){
span.innerHTML="";
}
}
}
</script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center" class="all">
<div class="out">
<button id="1">1<br/>JAN</button>
<button id="2">2<br/>JAN</button>
<button id="3">3<br/>JAN</button>
<button id="4">4<br/>JAN</button>
<button id="5">5<br/>JAN</button>
<button id="6">6<br/>JAN</button>
<button id="7">7<br/>JAN</button>
<button id="8">8<br/>JAN</button>
<button id="9">9<br/>JAN</button>
<button id="10">10<br/>JAN</button>
<button id="11">11<br/>JAN</button>
<button id="12">12<br/>JAN</button>
</div>
<div id="span" class="outter"> </div>
</div>
</body>
</html>