我正在嘗試使用填充隨機化對角線下降線的位置。每當我嘗試使用下面的代碼時，這些行都不會改變。但是，如果我添加 style:padding-left:300px到雨的樣式并洗掉我的 JavaScript，我可以將元素向右移動 300 像素。我理論上可以做到這一點并繪制出每一行但是我想知道如何隨機化填充，最好是動態的，而不僅僅是onpageload
<script>
function randomnumber(min, max) {
var rn = Math.random() * (max - min) min;
document.querySelector('#rain .line').style.padding = rn 'px';
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:#000000;
margin: 100px;
}
.line {
height: 1px;
width: 40px;
background: white;
transform: rotate(45deg);
}
.rainsize{
height:100%;
width:100%;
opacity:0%;
z-index:1000;
position:fixed;
width:100%;
top:0px;
left:0px;
}
.move{
position:relative;
animation-name: moverain;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes moverain {
0%{top:0px;left:0px;}
100%{top:1000px;left:1000px;}
}
</style>
<div onpageload="randomnumber('10','1000')"class="rainsize"></div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
uj5u.com熱心網友回復：
您可以執行以下操作：
function randomnumber(min, max) {
return Math.round(Math.random() * (max - min) min);
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.line').forEach(value => value.style.padding = randomnumber(1, 10) 'px');
}, false);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/405614.html
標籤：