您的位置：首页 > Web前端 > JavaScript

学时钟及抽奖的制作有感

2012-04-20 12:26 357 查看

运用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这样的工具所能实现的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript function button border 工具 date

相关文章推荐

新的分享

章节导航