Javascript 单行上div的随机宽度_Javascript_Html_Css

Javascript 单行上div的随机宽度

javascript html css

Javascript 单行上div的随机宽度,javascript,html,css,Javascript,Html,Css,我有一组div，它们都在一行上，需要是随机宽度，但所有div的总和必须等于包含div的宽度我想用百分比来表示宽度。我如何在页面加载时随机生成这些宽度百分比显然，我需要使用javascript来实现这一点。如果有人能给我指出正确的方向，我将不胜感激。我不能使用jquery来实现这一点，它必须是简单的旧javascript 提前感谢您提出的任何建议我的div是这样的： <div class="progWrap"> <div class=

我有一组div，它们都在一行上，需要是随机宽度，但所有div的总和必须等于包含div的宽度

我想用百分比来表示宽度。我如何在页面加载时随机生成这些宽度百分比

显然，我需要使用javascript来实现这一点。如果有人能给我指出正确的方向，我将不胜感激。我不能使用jquery来实现这一点，它必须是简单的旧javascript

提前感谢您提出的任何建议

我的div是这样的：

<div class="progWrap">
                    <div class="adhSec"></div>
                    <div class="combSec"></div>
                    <div class="dosSec"></div>
                    <div class="guidSec"></div>
                    <div class="safSec"></div>
                    <div class="othSec"></div>
                </div>

我想要的最终效果是这样的：

如果页面刷新，则不必使用JavaScript或jQuery

PHP可以运行一次

因此，您可以：

// Set a full width parent div.

<div id="parent" style="width: 100%;"> 
<?php

$width_max = 100;
$number_of_divs = 6;
$div_widths = array();

for($i = 0; $i < $number_of_divs; $i++){
$random_width = rand(0, $width_max);
$width_max -= $random_width;
array_push($div_widths, $random_with);
    }

for($i = 0; $i < $numberOfDivs; $i++){ ?>
<div style="width:<?php echo $div_width[$i];?>"></div>
   <?php }
?>

</div>

//设置一个全宽父div。
您可以使用flex box的flex grow属性，如下所示，并使用JS为每个div上的flex grow值生成一个随机数。您可以轻松地将div添加到代码中，以获得所需的div数。我只用了四个人
代码笔：
flex box上的参考：

flex随机增长
.集装箱{
显示器：flex；
弯曲方向：行；
}
.成长{
高度：60px；
}
#首先{
背景颜色：粉红色；
}
#第二{
背景颜色：蓝色；
}
#第三{
背景颜色：绿色；
}
#第四{
背景颜色：黄色；
}
常量随机化=（）=>{
document.getElementById（'first'）.style.flexGrow=Math.floor（Math.random（）*10）+1；
document.getElementById（'second'）.style.flexGrow=Math.floor（Math.random（）*10）+1；
document.getElementById（'third'）.style.flexGrow=Math.floor（Math.random（）*10）+1；
document.getElementById（'fourth'）.style.flexGrow=Math.floor（Math.random（）*10）+1；
};
window.onload=随机化；
希望这有帮助。它生成6个整数，可用于宽度属性。可以生成的最大值有一个限制，当前设置为20，尽管最后一个div可以获得更高的值，这取决于前5个div的结果
如果要设置宽度的最小值，可以很容易地在while循环中包含一个条件

constdivs=（）=>Math.floor（Math.random（）*21）；//随机数
常数最大值=100；//最大宽度值
常数numberOfDivs=6；
常数el=[]；//存储宽度值
让start=0；//使while循环在超过100时停止
设实际值=0；//当宽度小于100时存储宽度之和
设i=0；//计算添加到el的div数
while（启动控制台日志（el）如果你想在正确的方向点头：
可以使用来对齐父级中的div。
然后编写一些javascript来执行以下操作：
选择.progWrap
中的所有div（请参阅）
循环这些div，并对每个div执行以下操作：

生成随机宽度（请参见）
将随机宽度应用于div（请参见）

祝你好运
 您没有给出任何迹象表明您正在解决问题的哪一部分
下面是您所描述内容的一个非常粗略的实现：

const a=Math.random（）；
常数b=数学随机（）；
常数c=数学随机（）；
常数和=a+b+c；
document.write(`
`);预先知道div的数量？或者它应该与任意数量的元素一起工作？有最小宽度吗？你试过什么了吗？你的密码呢？你试过什么？到目前为止我什么都没试过，只是想找个方向正确的点头。至于div的数量，这一行中有6个div。我假设反对票是因为你建议使用PHP来解决问题…@ThijsKramer这是不幸的，因为答案是正确的，PHP可以，JavaScript可以关闭。非常感谢你的建议。为了满足我的需要，做了一些小小的修改，它就完美了。谢谢你@Sarahelizabethwaldie不客气！请查看代码笔以获得更简洁的函数版本，类似于@thijs kramer提到的循环。@M_Griffiths，如果您向.grow类添加一个开始的flex grow值并设置一个转换，您会得到一个很好的效果：。grow{height:60px；flex grow:1；transition:all 0.5s ease；}再次感谢您。
<script>



window.onload = function(){
    generateDivs();
    }

function generateDivs(){

var width_max = 100; 
var number_of_divs = 6;
var div_widths = new Array();
var parent_div = document.getElementById("parent");

for(var i = 0; i < number_of_divs; i++){
var random_width = Math.floor((Math.random() * width_max) + 1);
width_max -= random_width;
div_widths.push(random_width);
}

for(var i = 0; i < number_of_divs; i++){
var newDiv = document.createElement('div');
parent_div.appendChild(newDiv);
newDiv.style.width = div_widths[i];
}

}
</script>

<!DOCTYPE html>
<html>
<head>
  <title>flex grow random</title>
    <style>
.container {
  display: flex;
  flex-direction: row;
}

.grow {
  height: 60px;
}


#first {
  background-color: pink;
}

#second {
  background-color: blue;

}

#third {
  background-color: green;

}

#fourth {
  background-color: yellow;
}

</style>
</head>
<body>

  <div class="container">
  <div class="grow" id="first"></div>
  <div class="grow" id="second"></div>
  <div class="grow" id="third"></div>
  <div class="grow" id="fourth"></div>
</div>


<script>
  const randomize = () => {

    document.getElementById('first').style.flexGrow = Math.floor(Math.random() * 10) + 1;
    document.getElementById('second').style.flexGrow = Math.floor(Math.random() * 10) + 1;
    document.getElementById('third').style.flexGrow = Math.floor(Math.random() * 10) + 1;
    document.getElementById('fourth').style.flexGrow = Math.floor(Math.random() * 10) + 1;
  };

  window.onload=randomize;
</script>

</body>
</html>