时间戳

首页 > 解决方案 > 如何在没有查看器输入的情况下运行 javascript

javascript - 如何在没有查看器输入的情况下运行 javascript

问题描述

我有一个为查看器输入而编写的 javascript 效果。如何随机化这些值，从而消除观众互动？我可以删除标签，但数字仍然可见。

这是HTML：

    <div id="control-box">
        <div>
            <label>Num Raindrops</label>
            <input id="num-rain" type="number" value="250" min="1" />
        </div>
        <div>
            <label>Rain Angle</label>
            <input id="angle" type="number" value="20" min="0" max="90" />
        </div>
        <div>
            <label>Angle Tightness</label>
            <input id="tightness" type="number" value="0" min="0" />
        </div>
        <div>
            <label>Raindrop Length</label>
            <input id="length" type="number" value="20" min="0" />
        </div>
        <div>
            <label>Variable Raindrop Length</label>
            <input id="var_length" type="number" value="0" min="0" />
        </div>
        <div>
            <label>Raindrop Speed</label>
            <input id="speed" type="number" value="7" min="0" />
        </div>
        <div>
            <label>Variable Raindrop Speed</label>
            <input id="var_speed" type="number" value="0" min="0" />
        </div>
    </div>
    <canvas id="rain"></canvas>

标签： javascriptinputbox

解决方案

好的，所以你已经解决了大部分你想要做的事情。这篇文章不知道你的 JavaScript 是什么样的，所以请耐心等待：

您已经在 DOM 元素中设置了范围，因此将其转换为 JavaScript，您可以执行以下操作：

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

var numRaindrops = getRandomArbitrary(1, 1000); //minimum 1 drop, maximum 1000
var rainAngle = getRandomArbitrary(0, 90); //minimum 0 deg, maximum 90deg
var tightness = getRandomArbitrary(min, max);
...

然后将这些值传递给绘制画布的函数。这样做可以确保value="{{value}}"您设置的默认值不是代码可以生成的唯一值！

现在，如果您只是想隐藏表单，并使用您创建的 DOM 来获取值（再次，据我了解，这将使 valuesstatic而不是 being dynamic，您可以只使用css和display:none输入，所以他们不要出现在屏幕上。

推荐阅读