如何在JavaScript

-1

随机移动的图片我怎么能随意移动球，当我点击使用的addEventListener 鼠标我想这个代码，但画面不动了。这段代码有什么问题？如何在JavaScript

的html代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<script src="work.js"></script> 

<link type="text/css" rel="stylesheet" href="work.css"> 
</head> 

<body> 

<div id = "frame" > 
<div id = "net1"> </div> 
<div id = "net2"> </div> 
<div id = "centerPoint"> </div> 
<div id = "centerLine"> </div> 
<img src="SoccerBall.png" width="40" alt="Ball" class="moveBall"> 
</div> 

</body> 

</html>

JavaScript代码

var ball = document.querySelector('.moveBall'); 
function bbb(){ 

var ball = document.querySelector('.moveBall'); 

var x = Math.floor(Math.random()*300); 
var y = Math.floor(Math.random()*300); 
ball.style.left = x + 'px'; 
ball.style.top = y + 'px'; 
}; 

document.querySelector('#frame').addEventListener('click',bbb);

这是我的CSS代码：

 #frame{ 
     border:solid thick red; 
     border-width:3px; 
     padding-left:9px; 
     padding-top:6px; 
     padding-bottom:6px; 
     margin:2px; 
     width:1220px; 
     height:1000px; 
     float:right; 
     background-color:green; 

     } 


.moveBall { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    } 
    #net1{ 

background-color: lightgray; 
width: 400px; 
padding: 40px; 
margin: auto; 

    } 

#net2{ 

background-color: lightgray; 
width: 400px; 
padding:40px; 
margin:auto; 
margin-top:840px;

来源

2017-05-31 amir

把它包装成window.addEventListener（ “装载”，函数（）{... –

@Jonasw为什么有此必要？ – j08691

@ j08691 document.querySelector可能会失败，因为JS是元素 –

添加样式position:absolute把球

(function() { 
 
    function bbb(){ 
 

 
    var ball = document.querySelector('.moveBall'); 
 
console.log(ball); 
 
    var x = Math.floor(Math.random()*300); 
 
    var y = Math.floor(Math.random()*300); 
 
    ball.style.left = x + 'px'; 
 
    ball.style.top = y + 'px'; 
 
}; 
 
    
 
document.querySelector('#frame').addEventListener('click',bbb); 
 

 
})();

#frame{ 
 
    border:solid thick red; 
 
    border-width:3px; 
 
    padding-left:9px; 
 
    padding-top:6px; 
 
    padding-bottom:6px; 
 
    margin:2px; 
 
    width:1220px; 
 
    height:1000px; 
 
    float:right; 
 
    background-color:green; 
 

 
} 
 

 

 
.moveBall { 
 
width:40px; 
 
height:40px; 
 
    position:absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    border-radius:50%; 
 
    
 
    border:1px solid red; 
 
} 
 
    
 
    #net1{ 
 
    background-color: lightgray; 
 
    width: 400px; 
 
    padding: 40px; 
 
    margin: auto; 
 
    } 
 

 
#net2{ 
 
    background-color: lightgray; 
 
    width: 400px; 
 
    padding:40px; 
 
    margin:auto; 
 
    margin-top:840px; 
 
}

<div id = "frame" > 
 
    <div id = "net1"> </div> 
 
    <div id = "net2"> </div> 
 
    <div id = "centerPoint"> </div> 
 
    <div id = "centerLine"> </div> 
 
    <img src="http://via.placeholder.com/350x150" width="40" alt="Ball" class="moveBall"> 
 
</div>

来源

2017-05-31 16:45:53 XYZ

球仍然不movien – amir

@amir请点击图片 – XYZ

仍然不工作，我想点击帧不在球图片 – amir

如何在JavaScript

回答

相关问题