上课心得

最新推荐文章于 2019-05-13 10:54:00 发布

原创最新推荐文章于 2019-05-13 10:54:00 发布 · 652 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了前端课程的学习心得，包括JSON、定时器及自定义CSS的基础知识，并通过一个实时更新日期时间的动态时钟项目来加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

又上了两天前端课，主要撸了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.onload=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.onload=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>