专栏首页前端说吧JS-匀速运动-运动停止

JS-匀速运动-运动停止

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>匀速运动停止条件</title>
        <style type="text/css">
        a{display: block;}
        input[type='button']{
            margin-top: 5px;
        }
            .div {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 200px;
                cursor: pointer;
            }
            .div2{
                width: 1px;
                height: 1200px;
                position: absolute;
                left: 300px;
                top: 0;
                background-color: blueviolet;
                /*用这个标杆,发现div1并没有走到300的准确位置,原因是?*/
            }
            .div3{
                width: 1px;
                height: 1200px;
                position: absolute;
                left: 100px;
                top: 0;
                background-color: blueviolet;
                /*用这个标杆,发现div1并没有走到300的准确位置,原因是?*/
            }
        </style>
        <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            var oBtn2 = document.getElementById('btn2');
            oBtn.onclick = function(){
                start(100);
            }
            oBtn2.onclick = function(){
                start(300);
            }
        }
        var timer = null;
        function start(iTarget){
        var oDiv = document.getElementById('div');
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = 0;
                if(oDiv.offsetLeft<iTarget){
                    speed = 7;
                }else{
                    speed = -7;
                }
                //这种个情况就是速度不能被整除的时候会出现的问题。
                //思路就像到一个地方下车,距离近了就算到了,不一定分要撞到墙上才算到了。
//                ?解决方法:Math.abs():绝对值,一个数,正负号都取正值
                if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
                    clearInterval(timer);
                    //oDiv.style.left = iTarget;
                    //最后忘了加px,所以还是有点距离有点问题。
                    oDiv.style.left = iTarget+'px';
                }else{
                    oDiv.style.left = oDiv.offsetLeft+speed+'px';
                    document.title = oDiv.offsetLeft+','+speed;
                }
                
            },30);
        }
        
        </script>
    </head>

    <body>
        <input type="button" value="到100" id="btn" />
        <input type="button" value="到300" id="btn2" />
        <div class="div" id="div"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    
    </body>

</html>

智能社的开发教程:原址:https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS:“分享到”之类的悬浮框的运动原理(代码)

    xing.org1^
  • css布局 - 工作中常见的两栏布局案例及分析

      突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。(以后看到其他类型的我再补充)

    xing.org1^
  • CSS-论css如何纯代码实现内凹圆角

    xing.org1^
  • 左右侧边栏固定宽,中间宽度自适应

    小蔚
  • 翻译:如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

    欲休
  • CSS布局 -- 左侧定宽,右侧自适应

    书童小二
  • 圣杯布局与双飞翼布局

    上一篇文章介绍了三种方法实现CSS三栏布局,本文则在此基础上,进一步介绍常用的圣杯布局与双飞翼布局。

    前端林子
  • CSS 基础系列:常见布局方式

    给 header、content、footer 设置相同的 width 或者 max-width(显示的宽度都一样,但是前者内容过长会溢出,后者会换行),再设置...

    Chor
  • CSS:你真的会用 z-index 吗?

    所有的盒模型元素都处于三维坐标系中,除了我们常用的横坐标和纵坐标,盒模型元素还可以沿着“z 轴”层叠摆放,当他们相互覆盖时,z 轴顺序就变得十分重要。

    WEBJ2EE
  • css制作表单

    对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fie...

    练小习

扫码关注云+社区

领取腾讯云代金券