運用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="停止" οnclick="Stop()" />
<input type="button" value="開始" οnclick="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這樣的工具所能實作的效果。