我对 JavaScript 比较陌生，并且一直在阅读它。我还不知道 JQuery，并计划下一步这样做。我正在努力想出一些简单的东西。
我想要做的是 - 我有 3 个单选按钮，我将它们命名为“Small Jump”、“Medium Jump”和“Big Jump”。我想要一个 30x30 的 div 在每次单击单选按钮时在屏幕上移动。我想以这种方式使用 math.random，如果我重新单击“单选”按钮，div 将不会再次 float 到同一区域。
我该怎么做？我有我想要的鼠标悬停功能，但单选按钮不会移动 div。
这是我目前的代码。
<html>
<head>
<style>
div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}
</style>
<body>
<h3>Click</h3>
Small Jump <input type="radio" id="smallRadio" name="speed"><br>
Medium Jump: <input type="radio" id="mediumRadio" name="speed"><br>
Big Jump: <input type="radio" id="largeRadio" name="speed"><br>
<div class='a' id="mainDiv" onmouseover=" move();"></div>
<script type="text/javascript">
console.log("hello");
function move() {
var redBox = document.getElementById("mainDiv");
var position = parseInt(redBox.style.left);
var radios = document.getElementsByName("speed");
if (radios[0].checked) {
console.log('small button checked');
}
console.log(radios);
position = position || 0;
redBox.style.left = position + 50 + "px";
}
function showStyle() {
var id = document.getElementById("a");
var str = "";
// var chosenValue = Math.random() * 10;
str = str + "position: " + id.style.position + ";";
str += "<br>top: " + id.style.top;
str += "<br>left: " + id.style.left;
str += "<br>width: " + id.style.width;
str += "<br>height: " + id.style.height;
document.getElementById("smallRadio").innerHTML = str;
}
</script>
</body>
</html>
最佳答案
这是一个例子，注释解释了它的作用。使用 jQuery(抱歉)，因为它有一种更好(也更容易)的方式来为所有浏览器做 JavaScript 事情 :)
$( document ).ready( function(){
// Initiate mouseover function when page is loaded
$('#mainDiv').mouseover(function(){
// What to do when mouse hovers over #mainDiv:
// Get step size (value) from the radio-input named 'speed' that is checked :
var stepSize = parseInt( $('input[type=radio][name=speed]:checked').val() );
// Get the current position:
var pos = $( this ).position();
var left = parseInt( pos.left );
var top = parseInt( pos.top );
// Calculate new positions
var new_left = left + stepSize;
var new_top = top + stepSize;
// Change the element's CSS to the new position(s)
$( this ).css('left', new_left + 'px' );
$( this ).css('top', new_top + 'px' );
});
});div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Choose step size:</h3>
1 px <input type="radio" id="smallRadio" name="speed" value="1" checked="checked"><br>
10 px <input type="radio" id="mediumRadio" name="speed" value="10"><br>
100 px <input type="radio" id="largeRadio" name="speed" value="100"><br>
<div class='a' id="mainDiv" onmouseover=" move();"></div>关于javascript - 在不使用 JQuery 的情况下使用 math.random 通过单选按钮移动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35328287/