问答详情
源自:2-2 JS透明度动画

求教这个错在哪?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js动画制作</title>

<style type="text/css">

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px; 

    }

</style>

<script type="text/javascript">

function startqwe(speed){

var qwe=document.getElementById('div1');

var speed=document.getElementById('txt1').value;

setInterval(function(){qwe.style.left=qwe.offsetLeft+speed+'px';},1000);

</script>

</head>

<body>

<div id="div1"></div>

设置速度<input type="text" id="txt1" />px/s

<input type="button" value="点击开始运动" style="position:relative;" onclick="startqwe(speed)" />


</body>

</html>

想设计一个自定义速度的运动结果没有反应麻烦大神看下谢谢

提问者:死之外科医生 2017-03-31 09:35

个回答

  • 小狗旺旺
    2017-03-31 10:53:58
    已采纳

    首先获取元素要在文档加载完成之后才能获取到的,其次是你那个速度是网页加载完成的时候输入的,所以要在点击事件里面获取,才能得到输入的速度值,这个值是个字符串用parseInt()转义下,speed是全局变量可以在函数里面使用,不用带进去

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>js动画制作</title>

    <style type="text/css">

    #div1{

    width:200px;

    height:200px;

    border:2px solid red;

    position:absolute;

    left:0px;

    top:50px; 

        }

    </style>

    </head>

    <body>

    <div id="div1"></div>

    设置速度<input type="text" id="txt1"/>px/s

    <input type="button" value="点击开始运动" style="position:relative;" onclick="startqwe()" />


    <script type="text/javascript">

    //获取元素要在文档加载完成之后在获取,一般写在最后面

    var qwe=document.getElementById('div1');

    var speed=document.getElementById('txt1').value;

    function startqwe(){

    //点击之后获取到速度值

    speed=document.getElementById('txt1').value;

    setInterval(function(){qwe.style.left=qwe.offsetLeft+parseInt(speed)+'px';

    },1000);

    }

    </script>

    </body>

    </html>


  • 咖啡很苦
    2017-03-31 11:03:23

    赞同上面的说法