js定时器（三）向左向右

最新推荐文章于 2022-10-27 13:49:20 发布

Naro7L

最新推荐文章于 2022-10-27 13:49:20 发布

阅读量569

点赞数

分类专栏：学习日记文章标签： javascript 定时器

本文链接：https://blog.csdn.net/naro7l/article/details/76649131

版权

学习日记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

非常简单的一个小练习，一会考虑把2.0贴上来

一.要实现的效果

1.点击向左，小方块向左走
2.点击向右，小方块向右走

二.效果图片

这里写图片描述

三.代码

1.css

<style type="text/css">
div{width: 100px;height: 100px;background: pink;position: absolute;left: 0;}
</style>

2.html

<body>
<input type="button" value="向左" id="btnLeft">
<input type="button" value="向右" id="btnRight">
<div id="div1"></div>
</body>

3.js

<script src="1.js"></script>/*获取声明的外链接，可以忽略*/
<script type="text/javascript">
var btnLeft=$('btnLeft') ;
var btnRight=$('btnRight');
var div1=$('div1');
var time=null;
btnRight.onclick=function(){
clearInterval(div1.time);
div1.time=setInterval(function(){
    var speed=parseInt(getStyle(div1,'left'))+10;
    div1.style.left=speed+'px';
    if (speed>900) {
        speed=900;
        div1.style.left=speed+'px';
        clearInterval(time);
    }
},30)

}
btnLeft.onclick=function(){
clearInterval(div1.time);
div1.time=setInterval(function(){
    var speed=parseInt(getStyle(div1,'left'))-10;
    div1.style.left=speed+'px';
    if (speed<0) {
        speed=0;
        div1.style.left=speed+'px';
        clearInterval(time);
    }
},30)

}

Naro7L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js定时器（三）向左向右

非常简单的一个小练习，一会考虑把2.0贴上来一.要实现的效果1.点击向左，小方块向左走 2.点击向右，小方块向右走二.效果图片三.代码1.css<style type="text/css">div{width: 100px;height: 100px;background: pink;position: absolute;left: 0;}</style>2.html<body><inpu
复制链接

扫一扫