JS实现页面载入时随机显示图片效果
更新时间：2016年09月07日 15:26:59 作者：onestopweb
这篇文章主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现页面载入时随机显示图片效果。分享给大家供大家参考，具体如下：
<html>
<head>
<title>JS 随机图片效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
img { border: #999999; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
</head>
<SCRIPT LANGUAGE="JavaScript">
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "img/a1.jpg";
images[2] = new Image();
images[2].src = "img/a2.jpg";
images[3] = new Image();
images[3].src = "img/a3.jpg";
images[4] = new Image();
images[4].src = "img/a4.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
</script>
<body bgcolor="#FFFFFF" text="#000000" OnLoad="swapPic()">
<img name="randimg" src="img/a1.jpg">
</body>
</html>
代码经测试可以正常运行。这里就不再配上运行效果图了，感兴趣的朋友可以挑几张美女图片测试一下看看效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript遍历算法与技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
需要添加几组数据到数据库，但是具体几组数据不确定，有客户来填写，所以，这里我用JS进行添加删除子方案，并要对方案输入的正确性加以判断，感兴趣的朋友可以了解下2013-04-04
这篇文章主要介绍了JavaScript设计模式之模板方法模式原理与用法,结合实例形式分析了JavaScript模板方法模式的概念、组成、定义、使用等相关操作技巧与注意事项,需要的朋友可以参考下2018-08-08
本文主要介绍了JavaScript制作游戏摇杆方向盘,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2014-04-04
一篇文章告诉你如何用事件委托实现JavaScript留言板功能
这篇文章主要为大家介绍了事件委托实现JavaScript留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象，回归迭代和循环】
这篇文章主要介绍了JavaScript求一组数的最小公倍数和最大公约数常用算法,结合实例形式分析了javascript基于面向对象，回归迭代和循环等算法求解一组数的最小公倍数与最大公约数相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下2016-01-01
在油价高企的今天,了解自己爱车的真实油耗情况对每位车主来说都至关重要,本文将介绍一个简单实用的油耗计算方法,并提供一个可以直接使用的HTML油耗计算器,本文提供的油耗计算器简单易用,无需安装任何软件,在任何有浏览器的设备上都可以使用,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了JavaScript 闭包机制详解及实例代码的相关资料,需要的朋友可以参考下2016-10-10
本篇文章主要是对js字符串转换成数字与数字转换成字符串的实现方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了Javascript如何递归遍历本地文件夹，文中代码非常细致，帮助大家更好的理解和学习JavaScript递归，感兴趣的朋友可以了解下2020-08-08
最新评论