如何将 Mathrandom 添加到课程中答案

【问题标题】：How to add Mathrandom to a class如何将 Mathrandom 添加到课程中
【发布时间】：2020-10-14 05:35:51
【问题描述】：

这里是 Javascript 新手。这是我尝试的第一个目标。我的目标是将 math.random 添加到我的 CSS 文件中的一个类中，以使随机雨滴出现并穿过我屏幕的不同部分进行动画。

我尝试用谷歌搜索如何将 math.random 添加到课程中，但找不到任何东西。我该怎么做？我只需要一个大致的想法，这样我就可以玩弄什么是有效的。谢谢！

<body>
  <div class="rain">
    <div class="rain-container">
      <div class="rain-drop drop1"></div>
      <div class="rain-drop drop2"></div>
      <div class="rain-drop drop3"></div>
      <div class="rain-drop drop4"></div>
      <div class="rain-drop drop5"></div>
      <div class="rain-drop drop6"></div>
      <div class="rain-drop drop7"></div>
      <div class="rain-drop drop8"></div>
      <div class="rain-drop drop9"></div>
      <div class="rain-drop drop10"></div>
      <div class="rain-drop drop11"></div>
      <div class="rain-drop drop12"></div>
      <div class="rain-drop drop13"></div>
      <div class="rain-drop drop14"></div>
      <div class="rain-drop drop15"></div>
      <div class="rain-drop drop16"></div>
      <div class="rain-drop drop17"></div>
      <div class="rain-drop drop18"></div>
      <div class="rain-drop drop19"></div>
      <div class="rain-drop drop20"></div>
    </div>
  </div>
</body>


const rainDrop = document.querySelectorAll(".rain-drop");
const mathRandom = Math.floor(Math.random() * 101);

// function raining() {}

function randomRain() {

}

console.log(rainDrop);


.rain {
    position: absolute;
    min-height: 100vh;
    min-width: 100vw;
}

.rain-drop {
    position: relative;
    width: 1px;
    border-left: .125vw solid rgb(189, 182, 182);
    transform: rotate(45deg);
    position: absolute;
    height: 4px;
    // right: 50vw;
    // height: .5vh;
}

.rain-container {
    position: relative;
    min-height: 100vh;
    min-width: 100vw;
    top: 100%;

}

.rain-container {
    animation: drop 2.5s linear -12s infinite normal;
    animation-fill-mode: none;
}

@keyframes drop {
        0% {
            top: 0vh;
        }

        50% {
            top: 50vh;
        }

        100% {
            top: 100vh;
        }
    }

【问题讨论】：

标签： javascript css css-animations

【解决方案1】：

您不能在 css 文件中添加 math.random，您可以使用 javascript 在 HTML 中使用内联样式

你可以使用这样的东西：

const drops = document.querySelectorAll(".rain-drop")

drops.forEach(drop => {
  // drop.style.property = value;
  drop.style.top = ( Math.random() * 200 ) + "px";
  drop.style.left = ( Math.random() * 200 ) + "px"
})

也检查这个答案可能有用：Add inline style using Javascript

【讨论】：

【解决方案2】：

当点击一个按钮时，这个函数会为你的 html 元素分配一个随机的十六进制颜色

var genNew = document.getElementById("boton");
var element = document.querySelector(".myElement");

const setBg = () => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  element.style.backgroundColor = "#" + randomColor;
}

genNew.addEventListener("click", setBg, false);

setBg();

<div class="myElement">Element</div>
<button id="boton"> Go! </button>

【讨论】：