js操作点击按钮移动方块2019年1月20日16时22分

实例

此操作请先定位元素在页面中的位置。

<style>
#bnt{
    margin-top:150px;
}
#move{
    height:30px;width:30px;background-color:lightpink;
    border-radius:50%;position: absolute;
}
</style>
<button id="bnt">点击</button>
<div id='move'>

</div>

<script>
var bnt = document.getElementById('bnt');
var box = document.getElementById('move');

bnt.onclick = function(){
    var timer=null;
    
    timer = setInterval(function(){
    
    clearInterval(timer);
    
    if(box.offsetLeft < 500){

    box.style.left = box.offsetLeft + 10 + 'px';

}else{
        clearInterval(timer);
    }
},100);
}

</script>