如何让 Div 使用单选按钮随机移动
How to get a Div to move randomly with radio buttons?
我一直在这里做一些研究，以享受学习JavaScript的乐趣。我一直在谷歌上搜索这个问题的答案，但没有运气。可能是我有点业余，不知道要搜索的正确术语，但也许有人可以引导我朝着正确的方向前进或帮助我。
无论如何，我正在寻找一种方法来让div 坐在中心并使用每个单选按钮在页面上随机移动。就像，div 是一种颜色，单击第一个单选按钮，它会从中心移动一点，然后中间的单选按钮会移动更多，但最后一个单选按钮会移动得很远。
明显的起点是页面的"中心"，终点无关紧要。它只需要在按下每个按钮时随机移动。
我有不错的HTML和CSS技能，非常基本的JS技能，以及一些实现JQuery的经验。理想情况下，我想弄清楚这一点，因为图书馆和我拥有的两篇文章没有帮助。
这是我到目前为止所拥有的。
提前谢谢!!
<html>
<head>
<style>
div.a {
width: 50px;
height:50px;
background-color:red;
margin:0px;
}
</style>
<script>
function showStyle() {
//alert(" ss " );
var id = document.getElementById("div1");
var str = "";
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("para").innerHTML = str;
}
function myFunction(){
var x= document.getElementById("smallRadio");
x.checked = true; }
function smallRadio() {
var id = document.getElementById("div1");
id.style.top = (parseInt(id.style.top) + 50) + "px";
}
function myFunction(){
var x= document.getElementById("mediumRadio");
x.checked = true; }
function smallRadio() {
var id = document.getElementById("div1");
id.style.top = (parseInt(id.style.top) + 50) + "px";
}
function myFunction(){
var x= document.getElementById("largeRadio");
x.checked = true; }
function smallRadio() {
var id = document.getElementById("div1");
id.style.top = (parseInt(id.style.top) + 50) + "px";
}
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
$('.a').animate({ top: newq[0], left: newq[1] }, function(){
animateDiv();
});
};
</script>
</head>
<body>
<h3>Click</h3>
Small Leap: <input type="radio" id="smallRadio"><br>
Medium Leap: <input type="radio" id="mediumRadio"><br>
Big Leap: <input type="radio" id="largeRadio"><br>
<button onclick="myFunction()">Click!</button>
<div class='a'></div>
这是我可能会这样做的方式，然后您可以根据需要进行调整。另外，请记住使用动画将 css 位置设置为绝对值时。可以在这里找到一个工作的小提琴
.CSS
div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}
.HTML
<h3>Click</h3>
Small Leap: <input type="radio" id="smallRadio"><br>
Medium Leap: <input type="radio" id="mediumRadio"><br>
Big Leap: <input type="radio" id="largeRadio"><br>
<div class='a' id="mainDiv"></div>
爪哇语
$(document).on('change', 'input:radio', function(){
var $thisRadio = $(this); //gives us a jQuery instance of current radio that triggered the event
//update functions
updateDivPosition($thisRadio);
});
function updateDivPosition($target)
{
var $div = $('#mainDiv');
var newLeft = 0;
var newTop = 0;
var currentPosition = $div.position();
switch($target.attr("id"))
{
case "smallRadio":
newTop = currentPosition.top + 10;
newLeft = currentPosition.left + 10;
break;
case "mediumRadio":
newTop = currentPosition.top + 30;
newLeft = currentPosition.left + 30;
break;
case "largeRadio":
newTop = currentPosition.top + 50;
newLeft = currentPosition.left + 50;
break;
}
newTop = newTop + "px";
newLeft = newLeft + "px";
$div.animate({"left": newLeft, "top":newTop},1000);
}
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>Click</h3>
Small Leap: <input type="radio" name="leap" value="small" id="smallRadio"><br>
Medium Leap: <input type="radio" name="leap" value="medium" id="mediumRadio"><br>
Big Leap: <input type="radio" name="leap" value="large" id="largeRadio"><br>
<button onclick="delegateJump()">Click!</button>
<div class='a' data-top="0" data-left="0"></div>
<div id='div1'></div>
<div id='para'></div>
</body>
</html>
.CSS
div.a {
width: 50px;
height:50px;
background-color:red;
margin:0px;
position: absolute;
top: 50%;
left:50%;
}
爪哇语
function showStyle() {
//alert(" ss " );
var id = document.querySelector('.a');
var str = "";
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;
str += "<br>move top: " + id.dataset.top;
str += "<br>move left: " + id.dataset.left;
document.getElementById("para").innerHTML = str;
}
function smallJump(){
return Math.floor(Math.random() * 25) - 10;
}
function mediumJump(){
return Math.floor(Math.random() * 100) - 50;
}
function largeJump(){
return Math.floor(Math.random() * 200) - 100;
}
function delegateJump() {
var type = $('input[name="leap"]:checked').val();
var div = $('.a')
switch (type) {
case "small":
div.attr("data-top", smallJump());
div.attr("data-left", smallJump());
break;
case "medium":
div.attr("data-top", mediumJump());
div.attr("data-left", mediumJump());
break;
case "large":
div.attr("data-top", largeJump());
div.attr("data-left", largeJump());
break;
default:
div.attr("data-top", 0);
div.attr("data-left", 0);
break;
}
}
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(x,y){
var w = $(window).width() - 50;
var h = $(window).height() - 50;
var x = parseInt(x, 10) || 0;
var y = parseInt(y, 10) || 0;
var nw = Math.floor(Math.random() * w) + x;
var nh = Math.floor(Math.random() * h) + y;
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition.apply(null, [$('.a').attr('data-top'), $('.a').attr('data-left') ] );
showStyle();
$('.a').animate({ top: newq[0], left: newq[1] }, function(){
animateDiv();
});
};
我更改了您的代码中的一些内容。
我改用数据属性来保存跳转值。
通过数据属性保存该值，随机跳转动画使用该值重新计算进一步的跳转。
我在div 的样式中添加了绝对定位。
您的无线电输入需要一个名称，这允许您使用一个选择器从其中任何一个中获取一个值。
相关文章：
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时，jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 在AngularJS中向控制器发送多个随机单选按钮值
- 带有单选按钮 JavaScript 的随机测验
- 使用单选按钮使 Div 在页面上随机移动
- 如何让 Div 使用单选按钮随机移动
- 5个单选按钮随机填充
- 在一段时间后随机检查一个单选按钮
