Question

我有一个屏幕，用于向“板”的div添加圆圈。圆圈附在板上，我有一些可以做各种事情的按钮。我苦苦挣扎的是“移动”。目前，圈子根本不动，但我以前能够使所有人都向某个方向移动，但从未切换过方向。

我不确定SetInterval是如何工作的还是我如何选择每个圆或我如何设置开关变量。我已经尝试过更改每个。

//start of page
$(document).ready(function(){
function getRandomColor(){
    var letters="0123456789abcdef";
    var result ="#";

    for (var i=0; i<6; i++)
    {
        result+=letters.charAt(parseInt(Math.random()*letters.length));
    }
    return result;
}
function addCircle(){

var circle=$('<div class="circle"</div>');

    $("#board").append(circle);
    $(circle).css({
    left : (Math.random() * ($("#board").width() - $(circle).width())),
    top : (Math.random() * ($("#board").height() - $(circle).height())),
    background: getRandomColor()
  });



}






$("#move").click(function move(){
  var stop;
    if (stop==true){
      clearInterval(id);
    }
      else {
        stop=true;
      $("#board").each(function(){
        var switchx = true;
        var switchy=true;
        var circle1 = $(this).child;

        var id = setInterval(frame, 10);
           function frame() {
           var x = $(circle1).position();
          if (switchx==false) {
                if(x.left<0)
                {
                  switchx=true;
                  $(circle1).css({background: getRandomColor()});
                }
                  else { $(circle1).css({
                  left:  x.left-3,
                 });
              }
        }
        else if(switchx==true) {
                if(x.left>400){

                  switchx=false;
                  $(circle1).css({background: getRandomColor()});
                }
                else {$(circle1).css({
                  left: x.left+3,
                 });
              }
          }
          if (switchy==false) {
                if(x.top<0){
                  switchy=true;
                  $(circle1).css({background: getRandomColor()});
                  }
                  else { $(circle1).css({
                  top:  x.top+3,
                 });
              }
          }

              else if(switchy==true) {
                if(x.top>400){
                  switchy=false;
                  $(circle1).css({background: getRandomColor()});
                }
                else {$(circle1).css({
                  top: x.top-3,
                 });
              }
          }



          }
       });//each
    }
 });//move




$("#add").click(function(e)
{
    addCircle();
});

$("#change").click(function(e)
{
    $(".circle").each(function color(){
        $(this).css({
            background: getRandomColor()
        });
    });
});

$("#reset").click(function(e){
$(".circle").remove();
for (var i=0;i<49;i++)
addCircle();
});

$( "#board" ).on("dblclick", ".circle", function() {
  $( this ).remove();
});

$( "#board" ).on("click", ".circle", function() {
    $(this).css('zIndex', z);
    z++;
});

function remove(){
    var node = document.getElementByClass("circle");
    node.removeChild(node.firstChild);
}
//rest of code
var z=999;
var go=false;
for(var i=0;i<49;i++)
addCircle();


});//end

<div id="board">

            </div>
          </div>
   <div class="col-sm-3"></div>
  </div>
  <div class="row">
  <div class="col-sm-1"></div>
     <div class="col-sm-6">
      <div id ="spread">
          <button id="add">
            add
          </button>
          <button id="change">
            change color
          </button>
          <button id="reset">
            reset
          </button>
          <button id="move">
            move
          </button>
          </div>
        </div>
   <div class="col-sm-2"></div>
  </div>

#board{
    border-width:  2px;
    margin: 50px;
    width: 400px;
    height: 400px;
    border-style: solid;
    position: relative;
}
.circle {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 3px solid black;
    position: absolute;
}

button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
#spread{
    display:flex;
    justify-content: space-between;
}

每个圆应沿一个方向移动，然后在其沿板边缘移动时改变方向。我认为我的边界不对，但是目前这并不重要。

这以前是我的任务，但是我正在为我的个人网站使用/升级它。

Answer 1

OP的move()功能（ O 原始 P ost）根本无法发挥作用。它是如此有缺陷，我不知道从哪里开始，所以这里有一些建议：

尽早定义变量。
例如。在move() var stop中已声明但从未定义，并且有{{1} }条件取决于它的存在。
jQuery在元素访问方面非常灵活，因此不需要使用id，您只需使用类就可以轻松完成。
例如。在演示中，所有id都有被转换为类。使用if/else可以让我们分配每个$('.circle').each()随机CSS属性。
请不要在ID上使用.circle。
例如。 .each()，而$('#board').each()是一个代码臭味。 $('#circle').each()将在给定jQuery集合中的每个元素上运行一个函数：

.each() jQuery集合 $(
/ 当前元素==> / ).each(function(index, element) { //⇧当前索引位置
jQuery集合可以是一组与选择器匹配的各种元素。
例如。$(this).css({....引用了所有类别为$(".circle")的元素。
使用.circle来优化CSS的动画和过渡效果-避免使用transform。

演示

演示中评论的详细信息

position

// returns a number in the range of min to max (inclusive)
function rand(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

/*
returns a string: "rgba(255, 0, 128, 0.5)"
The min and max params set each color's alpha and is
offset by a decimal. ex. Alpha (opacity) of 0.3 is 3 - the
valid values are 1 to 10 and min cannot be greater than
max of course.
*/
function getRGBa(min, max) {
  let blk = [0, 0, 0];
  let rgba = blk.map(num => num = Math.floor(Math.random() * 255));
  rgba.push(rand(min, max));
  return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${(rgba[3]*0.1).toPrecision(1)})`;
}

// Generates, positions, and fills the color of a .circle
function addCircle() {
  let color = getRGBa(5, 10);
  let circle = $('<figure class="circle" style="background-color:rgba(0,0,0,0);"></figure>');
  circle.css({
    'left': (Math.random() * ($(".board").width() - circle.width())),
    'top': (Math.random() * ($(".board").height() - circle.height())),
    'background-color': color
  });
  $(".board").append(circle);
}

// Changes background-color of each .circle
function changeColors() {
  $('.circle').each(function() {
    let color = getRGBa(5, 10);
    $(this).css('background-color', color);
  });
}

/*
Moves each .circle at a random speed, distance, and
direction. Transitions and transforms are used.
*/
function moveCircles() {
  $('.circle').each(function() {
    $(this).css({
      'transform': `translate(${rand(-100, 100)}px, ${rand(-100, 100)}px)`,
      'transition': `${rand(1, 10)*0.1}s`
    });
  });
}

// Removes all circles
function clearCircles() {
  $('.circle').each(function() {
    $(this).remove();
  });
}

// All event handlers
$('.add').on('click', addCircle);
$('.color').on('click', changeColors);
$('.move').on('click', moveCircles);
$('.clear').on('click', clearCircles);

:root {
  font: 400 16px/1 Arial;
}

.board {
  margin: 20px auto;
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 3px solid black;
  position: absolute;
}

我可以正确选择div的孩子吗？

1 个答案:

演示