要求：鼠标悬浮上面就显示本月有什么大事件发生
用到的事件为：onmouseover，onmouseout(比较蠢的方法),自己第一次想到的是这个笨办法。而且,没用过display这个属性，所以做出来的是个奇葩的东西。但是，给我题的学姐是个特别好的人，就给我讲了思路，然后今天看完源码，我重写一个，日历表。
利用window.οnlοad= function（）{}方法，这个方法的意思是，加载完页面，执行这个匿名函数,没有名字就是匿名函数;
http://www.softwhy.com/forum.php?mod=viewthread&tid=6191,参考这个链接可以学习onload
关于margin的用法：如何单写一个margin，可以在后面直接加距离，但是是按照上左下右的顺序；
比如： margin：1px,2px,3px,4px 意思就是margin-top：1px；margin-left：2px；margin-bottom：3px；margin-right：4px；
写一个div应该包含的内容：width，height，backgrouncolor，color，margin，padding，border
css中的color是 字体颜色的意思，backgroundcolor是背景颜色的意思
标签中尽量不写样式，写在css中，如果写的话默认单位为px不用写单位
outline：外边框。看不懂就去外w3c中去找案例。
id:hover属性就是伪样式的意思，伪样式的意思就是，当鼠标点在div的时候，div的伪样式就会生效。
常用的属性：display，innerHTML，className，style结果值都是=进行连接的！
id 不能为数字。
第一次做的：
<!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" οnmοuseοver="block()" οnmοuseοut="out()">1 JAN</td>
<td id="a2" οnmοuseοver="block2()" οnmοuseοut="out2()">2 FER</td>
<td id="a3" οnmοuseοver="block3()" οnmοuseοut="out3()">3 MAR</td>
<td id="a4" οnmοuseοver="block4()" οnmοuseοut="out4()">4 APR</td>
</tr>
<tr>
<td id="a5" οnmοuseοver="block5()" οnmοuseοut="out5()">5 MAR</td>
<td id="a6" οnmοuseοver="block6()" οnmοuseοut="out6()">6 JUN</td>
<td id="a7" οnmοuseοver="block7()" οnmοuseοut="out7()">7 JUL</td>
<td id="a8" οnmοuseοver="block8()" οnmοuseοut="out8()">8 AUG</td>
</tr>
<tr>
<td id="a9" οnmοuseοver="block9()" οnmοuseοut="out9()">9 SEP</td>
<td id="a10" οnmοuseοver="block10()" οnmοuseοut="out10()">10 Oct</td>
<td id="a11" οnmοuseοver="block11()" οnmοuseοut="out11()">11 NOV</td>
<td id="a12" οnmοuseοver="block12()" οnmοuseοut="out12()">12 DEC</td>
</tr>
</table>
<div class="a" >
<p id="p1">元旦：1月1日至3日放假三天。</p>
<p id="p2">春节：2月2日至8日放假7天。</p>
<p id="p3">"妇女节：3月8日妇女节，与我无关。"</p>
<p id="p4">清明节：4月3日至5日放假3天。</p>
<p id="p5">劳动节：4月30日至5月2日放假3天。</p>
<p id="p6">端午节：6月4日至6日放假3天。</p>
<p id="p7">小暑：7月7日小暑,不放假。</p>
<p id="p8">七夕节：8月6日七夕节。不放假。</p>
<p id="p9" >中秋节：9月10日至12日放假3天。</p>
<p id="p10">国庆节：10月1日至7日放假7天。</p>
<p id="p11">立冬：11月8日立冬。不放假。</p>
<p id="p12">艾滋病日:12月1日。<br>废除奴隶制国际日:12月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.οnlοad=function(){
var span =document.getElementById("span");
var arr=[
"元旦：1月1日至3日放假三天。",
"春节：2月2日至8日放假7天。",
"妇女节：3月8日妇女节，与我无关。",
"清明节：4月3日至5日放假3天",
"劳动节：4月30日至5月2日放假3天。",
"端午节：6月4日至6日放假3天。",
"小暑：7月7日小暑。不放假。",
"七夕节：8月6日七夕节。不放假。",
"中秋节：9月10日至12日放假3天。",
"国庆节：10月1日至7日放假7天。",
"立冬：11月8日立冬。不放假。",
"艾滋病日:12月1<p/>废除奴隶制国际日:12月2日。"
];
for(var i=1;i<13;i++){
document.getElementById(i).οnmοuseοver=function(){
span.innerHTML="<span>"+this.id+"月节日</span><p/>"+arr[this.id-1];
}
document.getElementById(i).οnmοuseοut=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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
