在每个页面加载显示不同的图像
Show different image on each page load
我有这个代码,简单地改变4图像在每个页面加载
<HEAD>
<script language="Javascript">
function RandomizeImage()
{
var imagesarray = new Array("001.png", "002.png", "003.png", "004.png")
var randomnumber = Math.round(Math.random()*(imagesarray.length - 1))
document.images.someimage.src = imagesarray[randomnumber]
}
</script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
</HEAD>
<BODY onload="RandomizeImage()" bgcolor="#000000">
<div id="bg">
<IMG name="someimage" src="001.png" border="0" onclick="location.href='mailto:me@xxx.com?Subject=Hello'" id="bgg">
</div>
</BODY>
然而,在大多数页面重新加载,我得到图像"001.png"或"002.png"。有人能告诉我为什么吗?
你可以使用这个函数:
function getRandom(min,max)
{
var res = Math.floor(Math.random() * (max+1 - min) + min);
return res;
}
示例:如果你想从(1,2,3,4,5
)中返回一个值,你应该选择min 1
和max 5
。
var rImage = '00'+getRandom(1,5)+'.png';
console.log(rImage);
// output: 001.png or 002.png or 003.png or 004.png or 005.png
希望对您有所帮助
用Math.floor()
代替.round()
,长度不减1:
var randomnumber = Math.floor(Math.random() * imagesarray.length);
Edit: Math.random() * 3
将给我们0(包含)和3(不包含)之间的数字。使用Math.round()
计算每个数字的值:
0: 0.0 — 0.4999
1: 0.5 — 1.4999
2: 1.5 — 2.4999
3: 2.5 — 2.9999
你可以看到,高和低的数字被选中的概率各为中间数字的一半。这是因为您永远不会得到-0.5 — -0.9999
或3.0 — 3.4999
范围内的数字,因此这些结束数字被选中的可能性为一半。
Math.floor()
消除了这个问题,因为所有的数字都在这个范围内。Math.random() * 4
将为我们提供介于0(包含)和4(不包含)之间的数字。使用Math.floor()
计算每个数字的值:
0: 0.0 — 0.9999
1: 1.0 — 1.9999
2: 2.0 — 2.9999
3: 3.0 — 3.9999
您可能会发现使用像下面这样的实用函数很有用:
function randomInt(max, min) {
min = min || 0;
var Max = Math.max(max, min) + 1;
var Min = Math.min(max, min);
return Math.floor(Math.random() * (Max - Min)) + Min;
}
这个函数的优点是参数的顺序无关紧要,而且min
是可选的。注意,由于此函数包含max
,因此您希望从数组长度中减去1:
var randomnumber = randomInt(imagesarray.length - 1);
数学。Round有如下效果:
0 <= x < 0.5 => 0
0.5 <= x < 1.5 => 1
1.5 <= x < 2.5 => 2
..
(n-0.5) <= x < n => n
正如你所看到的,第一个和最后一个数字被取走的概率更小。
所以更好的方法是使用这里指定的Math.floor
相关文章:
- 非常大的图像显示渐进
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- JS照片库.使大图像显示和缩略图可单击
- 多个图像显示带有动态创建的画布的最后一个图像并分配给图像
- 当我在jquery/javascript中单击按钮时加载图像显示
- React图像显示
- 随机图像显示,无重复,使用Javascript
- 将跨度内容(图像url)转换为图像(显示)
- 随机图像显示不止一次
- 节点.js 使用 Multer 上传图像显示未定义
- 范围滑块,用于更改轨道上方对齐圆的直径并使对齐的图像显示在下方
- 使用图像显示和隐藏
- 使用 JavaScript 将文件夹中的图库图像显示到网页中
- 画布到图像显示为无图像(空白)
- 传单不会将本地图像显示为叠加
- 切换此元素时,如何使不同的图像显示,而不是文本
- 在页面加载时将图像显示为弹出窗口
- 如何在模糊浏览器主窗口时将图像显示为叠加层
- iOS在画布上绘制图像显示:无会导致内存泄漏
- JavaScript 图像显示不起作用