JS实现页面载入时随机显示图片效果


Posted in Javascript onSeptember 07, 2016

本文实例讲述了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 相关文章推荐
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
常规表格多表头查询示例
Feb 21 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
You might like
PHP分页显示制作详细讲解
2008/11/19 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
javascript截取字符串小结
2015/04/28 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python通过future处理并发问题
2017/10/17 Python
python中的变量如何开辟内存
2018/06/26 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
生产管理的三大手法
2013/11/11 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
统计系教授推荐信
2014/02/28 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
党委班子对照检查材料
2014/08/19 职场文书
校运动会广播稿300字
2014/10/07 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
java解析XML详解
2021/07/09 Java/Android
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
Python软件包安装的三种常见方法
2022/07/07 Python