Question

我有一个CSS样式表，其中包含以下代码：

.content1{position:fixed;top:70px;left:70px;}
.content2{position:fixed;top:50px;left:150px;}
.content3{position:fixed;top:115px;left:190px;}
.content4{position:fixed;top:170px;left:190px;}
.content5{position:fixed;top:200px;left:110px;}
.content6{position:fixed;top:140px;left:40px;}

每当用户点击一个按钮时，该编号（1-6）应该随机设置。我们的想法是将每个div放在不同的地方

每次用户点击按钮时如何更改

$(function() {
      $('#btn2').click(function() {

         var classes = ["content1", "content2", "content3", "content4", "content5", "content6"];
    $("#content").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });

      });
    });

Answer 1

如果你真的想随意移动它，为什么不改变顶部和左边的位置？例如......

$( document ).ready(function() {
  $('#btn2').click(function() {

   // adding 0.5 to random to ensure it at least moves a bit
  var top = Math.round((Math.random() + 0.5) * 100 + 50);
  var left = Math.round((Math.random() + 0.5) * 100 + 40);
  $(this).css('top', top + 'px');
  $(this).css('left', left + 'px');

  });
});

Fiddle here

注意：Math.random()返回一个数字[0,1]，即可以是0，不能是1.
所以，要获得例如1到6，只需乘以6并加1，然后舍入

var oneTosix = Math.round((Math.random() * 6)); // gives 0-5  
oneTosix += 1; // gives 1-6

在css类中设置随机数

1 个答案: