如何使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>
2 個解決方案
解決方案1
0 已采納 2016-02-10 04:16:33
這就是我可能會這樣做的方式，然后您可以根據需要進行調整。 另外，請記住使用動畫將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>
Java腳本
$(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);
}
解決方案2
0 2016-02-10 05:13:34
的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%;
}
Java腳本
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樣式添加了絕對定位。
您的無線電輸入需要一個名稱，這使您可以使用一個選擇器從其中的任何一個獲取值。
使用嵌套單選按鈕獲取父輸入 div 的 ID 以實現可訪問性
[英]Get ID of parent input div with nested radio buttons for accessibility
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.