生成一个随机数

在我之前举办的两次赠书活动中，我承诺将从评论中随机抽取一位获胜者。 评论有数百条，所以我不会把数字写在小纸片上然后从帽子中抽取。 我实际上有一个掷骰子的 iPhone 应用程序打算使用，但后来我想，我为什么不快速构建一个网页来完成它呢？

我将此帖子的演示移动到了这个 CodePen，它更加实用，尽管使用 jQuery 等略显老派。 我将保留帖子的其余部分基本不变。

这是一个没有使用 jQuery 的版本……

JavaScript 随机数

使用 JavaScript 生成随机数非常简单

var numRand = Math.floor(Math.random() * 101);

这将返回 1 到 100 之间的随机数。但我希望使这个网站更有用，它将接收一个较低值和一个较高值，并返回这两个值之间的随机数。

HTML

几个文本输入框、一个“生成！”按钮和一个用于放置数字的空 div 容器就足够了

<input type="text" id="lownumber" value="1" />
and
<input type="text" id="highnumber" value="100" />

<br />

<input type="submit" id="getit" value="Generate!" />

<div id="randomnumber"></div>

jQuery

当单击“生成！”按钮时，我们将执行操作

$("#getit").click(function() {
    
        var numLow = $("#lownumber").val();
        var numHigh = $("#highnumber").val();
        
        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
        
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        
        if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh) && (numLow != '') && (numHigh != '')) {
            $("#randomnumber").text(numRand);
        } else {
            $("#randomnumber").text("Careful now...");
        }
        
        return false;
});

我认为最简单的方法是从高值中减去低值，生成 1 到该差值之间的随机数，然后再加上低值。为了确保其正常工作，我们需要检查各种情况

• 输入框不为空且为数字
• 第一个数字小于第二个数字

我使用了这个经典的 IsNumeric 函数来检查它们是否确实是数字：感谢 James 更新的 IsNumeric 函数（简单 10 倍）

function isNumeric(n){
  return !isNaN(n);
}

作为最后的润色，我希望在其中包含默认数字 1 和 100，但易于更改。因此，只要您切换到或单击任一元素，它就会清除数字并将颜色更改为黑色。它还确保如果您再次切换到或单击该处，它将不会执行此操作。

$("input[type=text]").each(function(){
    $(this).data("first-click", true);
});

$("input[type=text]").focus(function(){
   
    if ($(this).data("first-click")) {
        $(this).val("");
        $(this).data("first-click", false);
        $(this).css("color", "black");
    }
    
});