Making a Div move across a page randomly with radio buttons?
Question
Kind of new to programming to general and messing around with some JS. I'm trying to get some understanding and help to fix this. I've been to the library, trying to figure this out.
What I'm trying to do is have 3 radio buttons. I named them like small, medium, large and have a div in the middle. The div is suppose to be in the middle of the screen. The person selects a displacement, delta, from the radio buttons. The users mouses over the coloured div, the div would then move to a new location that is random (I'm thinking random() method), then the displacement between [delta -5, delta +5].
Right now. The program works. I cannot seem to get the 'div' right in the centre of the image and the div moved by math.random across the page is slow? How can I make that faster?
So these are the problems I'm not sure about.
1) How can I centre the div? I have tried twice to change the position, but then that leads to 'centre' not being a right name, then tried top and width, not working.
2) How can I make the div move faster by math.random.
3) Is there a way instead of refreshing the page, I can go to the other 'radio' and the speed slows down without making these complicated?
Here is the code I have so far.
<html>
<head></head>
<style>
div.moving{
width: 90px;
height:90px;
background-color:black;
position:absolute;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1 px <input type="radio" id="s" name="move" value="1" checked="checked"><br>
10 px <input type="radio" id="m" name="move" value="10"><br>
100 px <input type="radio" id="l" name="move" value="100"><br>
<div class='moving' id="mainDiv" onmouseover=" move();"></div>
</body>
<script type="text/javascript">
$( document ).ready( function(){
$('#mainDiv').mouseover(function(){
var stepSize = parseInt( $('input[type=radio][name=move]:checked').val() );
var pos = $( this ).position();
var left = parseInt( pos.left );
var top = parseInt( pos.top );
var new_left = left + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] );
var new_top = top + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] );
$( this ).css('left', new_left + 'px' );
$( this ).css('top', new_top + 'px' );
});});
document.getElementById('mainDiv').style.left="700px";
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
1 answers
solution1
0 2016-02-11 06:44:43
<html> <head></head> <style> html.body { width: 100%; height: 100%; } div.moving{ width: 90px; height:90px; background-color:black; position:absolute; left: 0; right: 0; margin: 0 auto;} </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 1 px <input type="radio" id="s" name="move" value="1" checked="checked"><br> 10 px <input type="radio" id="m" name="move" value="10"><br> 100 px <input type="radio" id="l" name="move" value="100"><br> <div class='moving' id="mainDiv" onmouseover=" move();"></div> </body> <script type="text/javascript"> $( document ).ready( function(){ $('#mainDiv').mouseover(function(){ var stepSize = parseInt( $('input[type=radio][name=move]:checked').val() ); var pos = $( this ).position(); var left = parseInt( pos.left ); var top = parseInt( pos.top ); var new_left = left + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] ); var new_top = top + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] ); $( this ).css('left', new_left + 'px' ); $( this ).css('top', new_top + 'px' ); });}); document.getElementById('mainDiv').style.left="0px"; function getRandomIntInclusive(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.