1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

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/post/7586.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: