学时钟及抽奖的制作有感

来源：互联网发布：2017淘宝开店得多少钱编辑：程序博客网时间：2024/04/25 23:03

运用javascript在.htm的格式里仅仅需要几行代码即可实现时钟和抽奖程序的制作。

例如：时钟的

<title>js实现的网页的时钟效果</title>
<style>
#time{
background-color:#FF9;
border:1px #00F dashed;
width:300px;
height:30px;}
</style>
</head>

<body>
<div id="time">现在的时间是</div>
<script>

function dispTime(){
var timestr=new Date().toLocaleString();
document.getElementById("time").innerHTML=timestr;
setTimeout("dispTime()","1000");
}
dispTime();
</script>
</body>

抽奖：

<title>非常给力的抽奖程序</title>
</head>

<body>
<img id="img" src="images/0.jpg" width="400" height="240" /><br><br>
<input type="button" value="停止" onclick="Stop()" />
<input type="button" value="开始" onclick="reStart()" />
<script>
var i=0;
var num=15;
var timeHander;
function choujiang(){
if(i<num){
document.getElementById("img").src="images/"+i+".jpg";
i++;
}
else{
i=0;
}
timeHander=setTimeout("choujiang()","50");
}
choujiang();
function Stop(){
clearTimeout(timeHander);
}
function reStart(){
choujiang();
}
</script>
</body>

课后感悟：

1.上课时感觉李伟老师一边讲，我们同时也用自己的电脑一边操作，效果真的很好；但是我在想这也许就是一时就住了，以后还是要自己不断的复习，练习；那样就可以长时间的记住了。

2.在时钟和抽奖程序的制作过程中学到了很多东西，比如var定义一个数字，相当于c++中的int；还有setTimeout是时间延迟，而timeHander则是取消时间延迟，这也许就是电脑的神奇，通过延迟和取消延迟来达到一个一个动画的设计以及控制。也许像这样的思想还有还有好多，通过在生活中发现也就能学会很多东西。还可以制作出很多小游戏。

3.javascript略微学了一点我就已经感觉她已经如此的强大了，如果再多学点要多厉害啊，期待，还有其他还有很多的像javascript的工具就更强大了。

4.希望自己能在计算机这条路上走的更远，能够看到更多的像javascript这样的工具所能实现的效果。