又上了两天前端课,主要撸了json和定时器基础的知识,慢慢消化,以后还会更难。
自定义CSS()
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf‐8">
5. <title>无标题文档</title>
6. <script>
7. function css(obj, name, value)
8. {
9. if(arguments.length==2) //获取
10. {
11. return obj.style[name];
12. }
13. else
14. {
15. obj.style[name]=value;
16. }
17. }
18.
19. window.οnlοad=function ()
20. {
21. var oDiv=document.getElementById('div1');
22.
23. alert(css(oDiv, 'width'));
24.
25. //css(oDiv, 'background', 'green');
26. };
27. </script>
28. </head>
29.
30. <body>
31. <div id="div1" style="width:200px; height:200px; background:red;">
32. </div>
33. </body>
34. </html>
还有数组的使用方法要多做多练,尽快搞熟
重中之重,当然是时钟的制作:
代码撸上:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
.box{width: 1400px;height: 500px;background: #000029;margin: 100px auto;}
.header{width: 1400px;height: 100px;text-align: center;letter-spacing: 20px;
font-size: 60px;color: white;line-height: 100px;}
.time0{width: 1400px;height: 162px;background:white;
font-size: 60px;}
.time{width: 1400px;height: 162px;background:white;
font-size: 50px;margin-top: 30px;}
</style>
<script type="text/javascript">
function toShi(n){
if(n<10){return '0'+n;}
else {return ''+n;}
};
window.οnlοad=function(){
var oTime0=document.getElementById('time0');
var aImg0=oTime0.getElementsByTagName('img');
var oTime=document.getElementById('time');
var aImg=oTime.getElementsByTagName('img');
function tick(){
var oDate=new Date();
var str0=toShi(oDate.getFullYear())+toShi(oDate.getMonth()+1)
+toShi(oDate.getDate());
var str=toShi(oDate.getHours())+toShi(oDate.getMinutes())
+toShi(oDate.getSeconds());
for (var i=0;i<str0.length;i++) {
aImg0[i].src='img/'+str0[i]+'.png';
};
for (var i=0;i<str.length;i++) {
aImg[i].src='img/'+str[i]+'.png';
};
};
setInterval(tick,1000);
tick();
};
</script>
</head>
<body>
<div class="box">
<p class="header">超酷时钟</p>
<div class="time0" id="time0">
<img src="img/0.png"/><img src="img/0.png"/><img src="img/0.png"/><img src="img/0.png"/>
年
<img src="img/0.png"/><img src="img/0.png"/>
月
<img src="img/0.png"/><img src="img/0.png"/>
日
</div>
<div class="time" id="time">
<img src="img/0.png"/><img src="img/0.png"/>
:
<img src="img/0.png"/><img src="img/0.png"/>
:
<img src="img/0.png"/><img src="img/0.png"/>
</div>
</div>
</body>
</html>
以上至此,还得继续努力,多练多得!