js 随机变换图片
<div style="position:absolute;left:40%;top:10%;border-style:dotted">
<img src="ejb.jpg"/><br/>
<input type="button" value="随机选择人物"/>
<input type="button" value="暂停"/>
</div>
<script type="text/javascript">
//创建一个数组
var paths = new Array();
var isExecute = true;
var count=0;
window.onload = function(){
//将N张图片的路径放入数组中
paths[0]="ejb.jpg";
paths[1]="j2ee.jpg";
paths[2]="java.gif";
paths[3]="javamail.gif";
}
//随机选择人物
document.getElementsByTagName("input")[0].onclick=function(){
window.setInterval("changeImage()",500);
isExecute=true;
}
//换图片
function changeImage(){
if(isExecute){
//随机选取一张图片
var path = getPath();
//动态修改图片的src属性值
var imgElement = document.images[0];
imgElement.src = path;
}
}
//随机选中一张图片的路径
function getPath(){
//随机获取0,1,2中的任何一个型值
var index = Math.floor(Math.random()*4);
count=count+1>3?0:count+1;
return paths[count];
//return paths[index];
}
//暂停
document.getElementsByTagName("input")[1].onclick=function(){
isExecute = false;
}
</script>
js 随机变换图片的更多相关文章
- js随机显示图片
定义一个图片数组,生成一个随机数对应数据索引. window.onload = choosePic; function choosePic() { var myPix = new Array(&quo ...
- 随机漂浮图片、右侧上下浮动快捷栏JS
随机漂浮图片JS: //公共脚本文件 main.js function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventL ...
- JS实现鼠标移入DIV随机变换颜色
今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...
- JS实现的随机显示图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 完整说明使用SpringBoot+js实现滑动图片验证
常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证.本文主要讲解的是滑块图片验证的实现流程.包括后台和前端的实现. 实现效果 使用的API java.awt.image.Buffe ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 随机获取图片的api接口
http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random(国内加载略慢) https://uploadbeta.com/ap ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- js多种切换图片
分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...
随机推荐
- [ IOS ] 视图控制对象ViewController的生命周期
init-初始化程序 viewDidLoad-加载视图 viewWillAppear-UIViewController对象的视图即将加入窗口时调用: viewDidApper-UIViewContro ...
- Protobuf 语法指南
英文: Proto Buffers Language Guide 本指南描述了怎样使用protocol buffer 语法来构造你的protocol buffer数据,包括.proto文件语法以及怎样 ...
- 混沌数学之Rössler(若斯叻)吸引子
若斯叻吸引子(Rössler attractor)是一组三元非线性微分方程: frac{dx(t)}{dt} = -y(t)-z(t) frac{dy(t)}{dt} = x(t)+a*y(t) fr ...
- Informatica 常用组件Lookup之八 查找高速缓存
可以配置查找转换以高速缓存查找文件或表.PowerCenter 将在处理高速缓存查找转换中的第一个数据行时在存储器中建立高速缓存.它将根据您在转换或会话特性中配置的数量来分配高速缓存区内存.Power ...
- RabbitMQ Zabbix 监控
RabbitMQ Zabbix 监控 参考: https://github.com/jasonmcintosh/rabbitmq-zabbix copy api.py list_rabbit_node ...
- go语言之进阶篇指针类型和普通类型的方法集
方法集 类型的方法集是指可以被该类型的值调用的所有方法的集合. 用实例实例 value 和 pointer 调用方法(含匿名字段)不受方法集约束,编译器编总是查找全部方法,并自动转换 receiver ...
- C#中Serializable序列化
序列化就是是将对象转换为容易传输的格式的过程,一般情况下转化打流文件,放入内存或者IO文件 中.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象,或 ...
- OpenProcess、GetExitCodeProcess、TerminateProcess
//声明: {返回进程的句柄} OpenProcess( dwDesiredAccess: DWORD; {訪问选项} bInheritHandle: BOOL; {是否能继承; Tr ...
- leetcode笔记:Sqrt(x)
一. 题目描写叙述 Implement int sqrt(int x). Compute and return the square root of x. 二. 题目分析 该题要求实现求根公式,该题还 ...
- C#.NET常见问题(FAQ)-浮点数如何四舍五入
使用Math.Round方法即可实现保留指定的小数点后面位数,这种方法返回的还是double类型,而ToString方法并没有做实际转换 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: ...