在css类中设置随机数答案

【问题标题】：Set random number in css class在css类中设置随机数
【发布时间】：2016-04-09 21:44:53
【问题描述】：

我有一个 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)]);
    });

      });
    });

【问题讨论】：

好的，我已经添加了代码。但仍然无法正常工作。你能帮帮我吗？
您在 7 分钟内编写了完整的实现？为什么不花更多的钱来检查它为什么不起作用呢？您是否尝试过记录生成的索引？也许它包含一个奇怪的值（例如，一个浮点值）。在这种情况下，您可能也会在控制台中收到错误，这将有助于了解。

标签： javascript jquery html css

【解决方案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

【讨论】：

为什么这被否决了？我只是尽力提供帮助...：/