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 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
Javascript的this用法
Jan 16 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
实例讲解v-if和v-show的区别
Jan 31 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读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
React中的render何时执行过程
2018/04/13 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
主管职责范文
2013/11/09 职场文书
聚美优品励志广告词
2014/03/14 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
工程合作意向书范本
2015/05/09 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS