Fatal编程技术网
  • javascript/
  • Javascript 如何使用单选按钮使Div随机移动？

Javascript 如何使用单选按钮使Div随机移动？

javascript jquery html css

Javascript 如何使用单选按钮使Div随机移动？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,为了享受学习JavaScript的乐趣，我在这里做了一些研究。我一直在谷歌上寻找答案，但运气不好。这可能是因为我有点业余，不知道合适的搜索词，但也许有人可以引导我正确的方向或帮助我 无论如何，我正在寻找一种方法，让一个div坐在中间，并用每个单选按钮在页面上随机移动。比如，div是一种颜色，单击第一个单选按钮，它会从中心移动一点，然后中间的单选按钮会移动更多，但最后一个单选按钮会移动很远 起点明显是页面的“中心”，终点无关紧要。它只需要在按下每个按钮时随机移动 我有不错的HTML和CSS技能，非

为了享受学习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>


a组{
宽度：50px；
高度：50px；
背景色：红色；
边际：0px；
}
函数showStyle（）{
//警报（“ss”）；
var id=document.getElementById（“div1”）；
var str=“”；
str=str+“位置：”+id.style.position+“；”；
str+=”
top:“+id.style.top；
str+=“
左：”+id.style.left；
str+=“
宽度：”+id.style.width；
str+=“
高度：”+id.style.height；
document.getElementById（“para”）.innerHTML=str；
}
函数myFunction（）{
var x=document.getElementById（“smallRadio”）；
x、 checked=true；}
函数smallRadio（）{
var id=document.getElementById（“div1”）；
id.style.top=（parseInt（id.style.top）+50）+“px”；
}
函数myFunction（）{
var x=document.getElementById（“mediumRadio”）；
x、 checked=true；}
函数smallRadio（）{
var id=document.getElementById（“div1”）；
id.style.top=（parseInt（id.style.top）+50）+“px”；
}
函数myFunction（）{
var x=document.getElementById（“largeRadio”）；
x、 checked=true；}
函数smallRadio（）{
var id=document.getElementById（“div1”）；
id.style.top=（parseInt（id.style.top）+50）+“px”；
}
$（文档）.ready（函数（）{
animateDiv（）；
});
函数makeNewPosition（）{
var h=$（窗口）.height（）-50；
var w=$（窗口）.width（）-50；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
返回[nh，nw]；
}
函数animateDiv（）{
var newq=makeNewPosition（）；
$（'.a'）.animate（{top:newq[0]，left:newq[1]}，function（）{
animateDiv（）；
});
};
点击
小飞跃：

中等跳跃：

大跃进：

点击
我可能会这样做，然后您可以根据需要调整。另外，请记住，当使用动画将css位置设置为绝对位置时。可以找到一把小提琴

CSS

HTML

HTML

Javascript

$(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);   
}

 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();       
    });

  };

函数showStyle（）{
//警报（“ss”）；
var id=document.querySelector（'.a'）；
var str=“”；
str=str+“位置：”+id.style.position+“；”；
str+=”
top:“+id.style.top；
str+=“
左：”+id.style.left；
str+=“
宽度：”+id.style.width；
str+=“
高度：”+id.style.height；
str+=“
移动顶部：”+id.dataset.top；
str+=“
向左移动：”+id.dataset.left；
document.getElementById（“para”）.innerHTML=str；
}
函数smallJump（）{
返回Math.floor（Math.random（）*25）-10；
}
函数mediumJump（）{
返回Math.floor（Math.random（）*100）-50；
}
函数largeJump（）{
返回Math.floor（Math.random（）*200）-100；
}
函数delegateJump（）{
var type=$（'input[name=“leap”]：checked'）.val（）；
var div=$（'.a'）
开关（类型）{
案例“小”：
div.attr（“数据顶端”，smallJump（））；
div.attr（“数据左侧”，smallJump（））；
打破
案例“中等”：
div.attr（“数据顶端”，mediumJump（））；
div.attr（“数据左侧”，mediumJump（））；
打破
案例“大”：
div.attr（“数据顶端”，largeJump（））；
div.attr（“数据左侧”，largeJump（））；
打破
违约：
div.attr（“数据顶端”，0）；
div.attr（“数据左侧”，0）；
打破
}
}
$（文档）.ready（函数（）{
animateDiv（）；
});
函数makeNewPosition（x，y）{
var w=$（窗口）.width（）-50；
var h=$（窗口）.height（）-50；
var x=parseInt（x，10）| 0；
var y=parseInt（y，10）| 0；
var nw=Math.floor（Math.random（）*w）+x；
var nh=数学地板（数学随机（）*h）+y；
返回[nh，nw]；
}
函数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的样式添加了绝对定位

  • 您的无线电输入需要一个名称，这允许您使用一个选择器从任何输入中获取一个值

    • 我会为你做一把小提琴。我也不会使用相同、导致错误或只执行上次发现的函数名。这个fiddle可能是一种不同的编码风格，但作为概念证明，我将如何处理它。有多少个
    myFunction
    ？没有单选按钮名称的地方？应该有三个单选按钮。我想我总共需要3个单选按钮。如果你想要完全随机的，用一个随机数作为递增数。此外，检查“增量后的位置”是否大于“父宽度”，如果是， 
    $(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>
  <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>

    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();       
    });

  };