javascript 实现动画

来源：互联网发布：python小游戏编程实例编辑：程序博客网时间：2024/05/17 08:03

在 boday 元素onLoad事件里设置一个 500ms timer ，在timer的处理函数再启动一个新的timer，这样就可以循环往复的运行timer。在timer处理函数secondCount()中修改img.src这个属性，就可以改变图形区域的显示内容。这个简单的程序放在android里和相机一起实现一个 ipcam.

<html><head><script>var secondStr ;var pngsItem ;var pngsNo = 0 ;var secoCount = 0 ;function secondCount(){//document.write("start timer  "+secoCount ) ;secoCount ++ ;pngsNo = (pngsNo%3) + 1 ;//alert(" secoCount = " + secoCount ) ;document.getElementById("second").innerHTML  = secondStr + secoCount ;pngsItem.src = pngsNo + ".png" ; t = window.setTimeout("secondCount()" , 500 ) ;}function body_onLoad(){//document.write("start timer  ") ;secondStr = document.getElementById("second").innerHTML;pngsItem = document.getElementById("pngs") ;pngsNo = 0 ;t = window.setTimeout("secondCount()" , 1000 ) ;//alert("timer " + t + " is created" ) ;}</script></head><body onLoad="body_onLoad()"><h3>1s timer , time function revive the timer and change image attribute pngs.src to update the image  content and update clock showing. </h3><p id="second"> second     </p><p id="lg"><img id="pngs" src="1.png" /></p></body></html>

1.png

2.png

3.png