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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
js实现坦克大战游戏
Feb 24 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 文件缓存的性能测试
2010/04/25 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP安全上传图片的方法
2015/03/21 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
详解vue 命名视图
2019/08/14 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python字符串,数值计算
2016/10/05 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
客服文员岗位职责
2013/11/29 职场文书
最新党员思想汇报
2014/01/01 职场文书
淘宝客服工作职责
2014/07/11 职场文书
终止劳动合同协议书
2014/10/05 职场文书
文明单位汇报材料
2014/12/24 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
公司财务管理制度
2015/08/04 职场文书