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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP学习记录之数组函数
2018/06/01 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Django分组聚合查询实例分享
2020/04/29 Python
通过代码实例了解Python sys模块
2020/09/14 Python
用python对excel查重
2020/12/07 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
某科技软件测试面试题
2013/05/19 面试题
物流仓管员岗位职责
2013/12/04 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android