要求:鼠标悬浮上面就显示本月有什么大事件发生
用到的事件为: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>