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 相关文章推荐
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
React如何创建组件
Jun 27 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
ThinkPHP之import方法实例详解
2014/06/20 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
JS backgroundImage控制
2009/05/19 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
人事主管岗位职责
2014/01/30 职场文书
银行工作检查书范文
2014/01/31 职场文书
食品安全承诺书
2014/05/22 职场文书
会计演讲稿范文
2014/05/23 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js