第三十四天：js总结+重写js的日历

来源：互联网发布：西装牌子知乎编辑：程序博客网时间：2024/05/28 18:45

要求：鼠标悬浮上面就显示本月有什么大事件发生

用到的事件为：onmouseover，onmouseout(比较蠢的方法),自己第一次想到的是这个笨办法。而且,没用过display这个属性，所以做出来的是个奇葩的东西。但是，给我题的学姐是个特别好的人，就给我讲了思路，然后今天看完源码，我重写一个，日历表。

利用window.onload= 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>//p1function block(){document.getElementById("p1").style.display="block";}function out(){document.getElementById("p1").style.display="none";}//p2function block2(){document.getElementById("p2").style.display="block";}function out2(){document.getElementById("p2").style.display="none";}//p3function block3(){document.getElementById("p3").style.display="block";}function out3(){document.getElementById("p3").style.display="none";}//p4function block4(){document.getElementById("p4").style.display="block";}function out4(){document.getElementById("p4").style.display="none";}//p5function block5(){document.getElementById("p5").style.display="block";}function out5(){document.getElementById("p5").style.display="none";}//p6function block6(){document.getElementById("p6").style.display="block";}function out6(){document.getElementById("p6").style.display="none";}//p7function block7(){document.getElementById("p7").style.display="block";}function out7(){document.getElementById("p7").style.display="none";}//p8function block8(){document.getElementById("p8").style.display="block";}function out8(){document.getElementById("p8").style.display="none";}//p9function block9(){document.getElementById("p9").style.display="block";}function out9(){document.getElementById("p9").style.display="none";}//p10function block10(){document.getElementById("p10").style.display="block";}function out10(){document.getElementById("p10").style.display="none";}//p11function block11(){document.getElementById("p11").style.display="block";}function out11(){document.getElementById("p11").style.display="none";}//p12function 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">元旦：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.onload=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).onmouseover=function(){span.innerHTML="<span>"+this.id+"月节日</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>

阅读全文

0 0