JavaScript 生成随机数与随机图片展示方法

作者:拾光

时间:2026-10-24

浏览:588

本文介绍在 JavaScript 中生成随机数的多种方法,包括使用 Math.random() 获取浮点数、基于时间生成整数以及使用自定义随机数发生器。同时,通过具体代码示例演示如何结合随机数实现网页中随机图片的加载与显示,涵盖直接拼接文件名和根据数值动态设置图片属性两种场景。

文章目录

JavaScript 生成随机数的方法

创建随机数


自 JavaScript 诞生以来,许多浏览器都内置了随机数生成方法。例如:


var number = Math.random();


该方法用于生成一个介于 0 到 1 之间的浮点数。


此外,还可以基于当前时间生成随机数。例如:


var now=new Date();


var number = now.getSeconds();


这将生成一个基于当前时间的 0 到 59 之间的整数。


var now=new Date();


var number = now.getSeconds()%43;


这将生成一个基于当前时间的 0 到 42 之间的整数。


这里介绍一种较为优秀的随机数生成程序,可应用于多个领域。


  

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


若要在网页中使用该随机数发生器,必须将这段代码放置在 <HEAD> 和 </HEAD> 标记之间。


创建随机浮点数时使用 rnd();若要创建随机整数,例如 1 到 10 的范围,则使用 rand(10)。


在下面的随机图片示例中,使用了该随机数发生器来产生随机数。因此,要使示例正常工作,需确保网页中已包含上述代码。


基于随机数实现图片随机显示

创建随机图片


利用随机数实现随机图片展示是最简单的应用之一。本例假设存在 10 张图片,文件名为 banner1.gif 至 banner10.gif。每当文档载入时,我们希望随机显示其中一张图片。


<script language="JavaScript"><!--


document.write('<img src="../images/banner' + rand(10) + '.gif" width=400 height=40>');


//--></script>


如果图片未以数字命名,或者图片类型、尺寸不同,可以通过检查随机数的值来显示相应的图片:


代码如下:

 
<script language="JavaScript"><!--
var number = rand(10);
if (number == 1) {
var picture = "one.gif";var width = 400;var height = 40;
} 
} else if (number == 2) {
var picture = "two.jpg";var width = 200;var height = 20;
} 
... 
... 
} else if (number == 9) {
var picture = "nine.gif";var width = 450;var height = 450;
} 
} else if (number == 10) {
var picture = "ten.jpg";var width = 40;var height = 400;
} 
document.write('<img src="../images/' + picture + '" width=' + width + ' height=' + height + '>');
//--></script>

上述内容介绍了如何随机显示图片。同理,利用随机数还可以创建随机文本、表单、标题广告、URL、背景颜色和图像、调查表及帧等,此处不再赘述。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章