随机抽图片 可以指定的图片抽中机率大

时间:5年前   阅读:6307

1、步骤和代码注写直接上,代码效果点(运行代码)来看

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				margin: 0;    
				padding: 0;    
			}    
			#gg{    
				display: block;    
				margin: 0 auto;    
				width: 500px;    
				height: 300px;    
			}    
			#uu{    
				width: 500px;    
				height: 100px;    
				margin: 50px auto;    
			}    
			#uu input{    
				width: 100px;    
				height: 50px;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
				var dd = document.getElementById('dd');    
				var tt = document.getElementById('tt');    
				var gg = document.getElementById('gg');    
//				 先声明一下,后面清理定时器加上去的    
				var yy;    
//				 用来存储图片路径的数组    
				var tp = ['https://www.qiquanji.com/data/img/dmj/201903061551842260151977.jpg','https://www.qiquanji.com/data/img/dmj/201903061551842260817561.jpg','https://www.qiquanji.com/data/img/dmj/201903061551842260871497.jpg','https://www.qiquanji.com/data/img/dmj/201903061551842260202584.jpg','https://www.qiquanji.com/data/img/dmj/201903061551842261140332.jpg','https://www.qiquanji.com/data/img/dmj/201903061551842261288423.jpg']    
//				 给开始按钮加单击事件    
				dd.onclick = function(){    
//				 	后面一步清理定时器加上去的(先清理一下多点击就会叠加的定时器)    
				 	clearInterval(yy);    
//				 	设置定时器,每隔一秒钟就换一张图片        yy是后面清理定时器加上去的   要全局变量不要var,因为是在另一个定时器清除的    
				 	yy = setInterval(function(){    
//				 		抽取随机下标    
				 		var aa = Math.floor(Math.random()*(tp.length-1+1-0)+0);    
//				 		给aa号路径设置给图片    
				 		gg.setAttribute('src',tp[aa]);    
				 	},100)    
				}    
//							停止抽奖    
						tt.onclick = function(){    
//							清理定时器    
							clearInterval(yy);    
//							生成一个随机数,让停止定时器出现谢谢惠顾的机率大    
//							这样可以轮播的时候是正常的,但是停止有百分之80是停在谢谢惠顾这里    
						var xx = Math.random()*10;    
							if (xx<8) {    
							gg.	setAttribute('src','https://www.qiquanji.com/data/img/dmj/201903061551842261140332.jpg');    
							}    
						}				 
    
			}    
		</script>    
	</head>    
	<body>    
		<div id="uu">    
		<input type="button"  id="dd" value="开始抽奖" />    
		<input type="button"  id="tt" value="停止抽奖" />			    
		</div>    
		<br /><br />    
		<img src="t06.jpg" alt="" id="gg"/>    
	</body>    
</html>

部分代码截图:

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:zblog或PHP的网站错误提示:PHP Fatal error: Allowed memory size of 134217728 bytes exhausted解决方法

下一篇:期货和期权谁的杠杆率更高?

网友评论

请先 登录 再评论,若不是会员请先 注册