文本“Hello,World!”在网页的顶部来回移动,每移五步(每步1px),使文本在红色和蓝色之间切换(初始颜色为红色)。
- <html>
- <head>
- <title>动态文档制作</title>
- <script language="javascript">
- i=0;
- control = true;
- count = 0;
- function moveText()
- {
- screenWidth = parseInt(document.body.clientWidth);
- textWidth = parseInt(txt.style.width);
- txt.style.left = i;
- if(control && screenWidth-textWidth > i)
- {
- i+=1;
- count+=1;
- if(count==5)
- change();
- }
- else
- {
- control = false;
- }
- if(!control && i > 0)
- {
- i-=1;
- count+=1;
- if(count==5)
- change();
- }
- else
- {
- control = true;
- }
- function change()
- {
- count=0;
- var color = document.getElementById("txt").style.color;
- if(color=="red")
- document.getElementById("txt").style.color="blue";
- else
- document.getElementById("txt").style.color="red";
- }
- setTimeout("moveText()",100);
- }
- </script>
- </head>
- <body onLoad="moveText()">
- <div id="txt" style="position:absolute;width=98">HelloWord!!</div>
- </body>
- </html>
效果如下:
转载于:https://blog.51cto.com/outdoxl/835336