天天看點

學時鐘及抽獎的制作有感

  運用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這樣的工具所能實作的效果。

繼續閱讀