博客网 >

如何使用SetInterval
作者:分类:默认分类标签:

改变图片src即可看到效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
var intervalID;//定义这个变量作为指向添加间隔函数的句柄,用于清除间隔函数。

function Button1_onclick() {
 intervalID = setInterval(MoveImg, 100);//添加一个间隔函数,每隔0.1秒执行MoveImg()一次
}

function MoveImg()
{
 var div=document.getElementById ('图片');
 var left=parseInt(div.style.left);//得到左边坐标
 if(left<900)//判断坐标并每次增加5
  div.style.left=left+5+'px'; 
 
}

function stopMove()
{
 clearInterval(intervalID);//清楚间隔函数
}


function Button2_onclick() {
 stopMove();
}

// ]]>
</script>
</head>
<body>
 <input id="Button1" style="z-index: 100; left: 266px; position: absolute; top: 366px"
  type="button" value="移动图片" onclick="return Button1_onclick()" />
 <input id="Button2" style="z-index: 100; left: 383px; position: absolute; top: 364px" type="button" value="停止" onclick="return Button2_onclick()" />
 <div id="图片" style="z-index: 101; left: 0px; width: 100px; position: absolute; top: 0px;
  height: 100px">
  <img src="88logo.jpg" style="z-index: 100; left: 0px; position: absolute; top: 0px" />
 </div>

</body>
</html>

<< VB.NET operator ... / 多浏览器支持资料 >>

专题推荐

不平凡的水果世界

不平凡的水果世界

平凡的水果世界,平凡中的不平凡。 今朝看水果是水果 ,看水果还是水果 ,看水果已不是水果。这境界,谁人可比?在不平凡的水果世界里,仁者见仁,智者见智。

中国春节的那些习俗

中国春节的那些习俗

正月是农历新年的开始,人们往往将它看作是新的一年年运好坏的兆示期。所以,过年的时候“禁忌”特别多。当然,各个地方的风俗习惯不一样,过年的禁忌也是不一样的。

评论
0/200
表情 验证码:

gisman

  • 文章总数0
  • 画报总数0
  • 画报点击数0
  • 文章点击数0
个人排行
        博文分类
        日期归档