如何在页面加载时生成随机数？

在页面加载时生成随机数可以通过多种方法实现，以下是一些常见的方法及其详细解释：

方法一：使用JavaScript的`Math.random()`

Math.random() 是 JavaScript 中的一个内置函数，用于生成一个大于等于 0 且小于 1 的随机浮点数。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number on Page Load</title>
</head>
<body>
    <h1>Random Number: <span id="randomNumber"></span></h1>

    <script>
        window.onload = function() {
            var randomNumber = Math.random();
            document.getElementById('randomNumber').innerText = randomNumber;
        };
    </script>
</body>
</html>

解释：

HTML部分：创建一个简单的 HTML 页面，包含一个 <span> 元素用于显示随机数。
JavaScript部分：使用 window.onload 事件确保在页面完全加载后执行脚本。Math.random() 生成一个随机数，并将其显示在 <span> 元素中。

方法二：使用HTML5的`<canvas>`元素

通过 <canvas> 元素生成随机数，可以结合一些图形操作来增加趣味性。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number on Page Load</title>
</head>
<body>
    <h1>Random Number: <span id="randomNumber"></span></h1>

    <script>
        window.onload = function() {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var width = canvas.width = 100;
            var height = canvas.height = 100;

            for (var x = 0; x < width; x++) {
                for (var y = 0; y < height; y++) {
                    var randomNumber = Math.floor(Math.random() * 256);
                    ctx.fillStyle = 'rgb(' + randomNumber + ',' + randomNumber + ',' + randomNumber + ')';
                    ctx.fillRect(x, y, 1, 1);
                }
            }

            var imageData = ctx.getImageData(0, 0, width, height);
            var data = imageData.data;
            var sum = 0;
            for (var i = 0; i < data.length; i += 4) {
                sum += data[i] + data[i + 1] + data[i + 2];
            }
            var average = sum / (width * height * 3);
            document.getElementById('randomNumber').innerText = average.toFixed(2);
        };
    </script>
</body>
</html>

解释：

HTML部分：与上一个示例类似，创建一个简单的 HTML 页面。
JavaScript部分：
- 创建一个 <canvas> 元素并获取其 2D 上下文。
- 使用嵌套循环在画布上绘制随机颜色的像素。
- 通过计算所有像素的平均值来生成一个随机数，并将其显示在 <span> 元素中。