我一直在這裏做一些研究,享受學習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>
我會爲你創建一個小提琴。我也不會使用相同的函數名稱,導致錯誤或只會執行最後找到的函數名稱。這個小提琴可能是一種不同的編碼風格,但是我將如何處理它作爲概念證明。 – Casey
有多少'myFunction'?哪裏沒有單選按鈕的名稱? – Rayon
那裏應該有三個。我在想,我需要3個單選按鈕。 – aether