DEMO

Question

我想知道是否有一种简单的方法来随机化CSS＆＃34; float＆＃34;给定.class或#Id的值。这意味着，每次刷新都应该随机选择float:left或float:right。

Answer 1

使用jquery非常简单，首先创建一个随机布尔值：

# dispute popup validation
jQuery("form.dispute_form").submit ->
flag = true
if jQuery("#reason_for_dispute").val() is ""
  applyPopover(jQuery("#reason_for_dispute"),"bottomMiddle","topLeft","Enter reason for dispute")
  flag = false
flag
jQuery("#reason_for_dispute").live "keyup", ->
jQuery(this).qtip("hide")

# Alert on dispute if invoice is paid
jQuery('#dispute_link').click ->
jQuery('#reason_for_dispute').val('')
flag = true
status = jQuery(this).attr "value"
if status is "paid"
  alert "Paid invoice can not be disputed."
  flag = false
flag

jQuery(".more").live "click", ->
jQuery(".toggleable").removeClass("collapse")

然后你用它来确定float是左还是右：

   var flt=Boolean(Math.floor(Math.random()*2));

或

   $("#id").css('float',flt?'left':'right');

我做了JSFiddle with a working demo

Answer 2

您可以执行以下操作：

var items = ['right','left'];
var item = items[Math.floor(Math.random()*items.length)];
$('#yourItem').css('float',item);

DEMO

Answer 3

这样的事情会起作用。创建一个浮点值数组对于班级中的每个项目，在数组中获取一个随机位置，并使用它来设置你的标志。

 <script>
    $(function(){
    var rFloat = ["left","right","none"];
    $(".youClass").each(function(){
         var xFloat = Math.floor(Math.random() * rFloat.length) + 1;  
          $(this).css("float",rFloat[xFloat]);
    });
    });
</script>

Answer 4

您可以使用PHP生成动态CSS文件。

需要HTML代码

<link rel='stylesheet' type='text/css' href='style.php' />

Style.php

<?php
header("Content-type: text/css; charset: UTF-8");

echo '#float {';
echo ( (boolean)rand(0, 1) ? 'float:left;' : 'float:right;' );
echo '}';

?>

随机化float css

4 个答案:

DEMO