html + js实现抽奖纯属娱乐

最新推荐文章于 2023-01-10 17:08:20 发布

Mchange

最新推荐文章于 2023-01-10 17:08:20 发布

阅读量1.8k

点赞数

分类专栏：前端 html 文章标签： html function null button border 娱乐

本文链接：https://blog.csdn.net/Mchange/article/details/7818697

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

window.onload = function(){


   				//预加载图片
   				images = new Array();
   				
   				for(var i=0; i<5; i++){
   					var img = new Image();
   					img.src = "img/" + i + ".png";
   					images[i] = img;
   				}
				
   				var speed = 100;  //单位是毫秒


   				//声明循环标识变量，用它的判断
   				var sh = null;


   				//绑定开始按钮
   				function start(){
   					//检查上一次循环是否结束，没结束强制结束
   					if(sh != null){
   						clearInterval(sh);
   						sh = null;
   					}else{
   						//开始新的循环
   						sh = setInterval(change,speed);
   					}
   					
   				}


   				//绑定结束按钮
   				function stop(){
   					//结束循环
   					if(sh != null){
   						clearInterval(sh);
   						sh = null;
   					}else{
   						return;
   					}


   					//检查结果
   					var result = checkResult();  //result:true|false


   					if(result){  //猜中！
   						$("#message_content_img").attr("src","img/smile.png");
   						$("#message_content_txt").html("亲～逗你玩儿的，再等等吧～～");
   						$("#message").slideDown(300);
   					}else{
   						$("#message_content_img").attr("src","img/cry.png");
   						$("#message_content_txt").html("作为失败的典型，你实在太成功了！");
   						$("#message").slideDown(300);
   					}
   				}


				//绑定键盘点击事件
               $(document).bind("keydown",function(event){ 
                  if(event.keyCode == 13){
                     if(sh == null){
                        start();
                        $("#message").css("display","none");
                     }else{
                        stop();
                       // $(this).unbind();
                     }
                  } 
               });
               
               $("#btnClose").click(function(){
               		$("#message").css("display","none");
               });


   			};




            //end main


   			//检查结果
   			function checkResult(){
   				var one = getNum($("#one").attr("src"));
   				var two = getNum($("#two").attr("src"));
   				var three = getNum($("#three").attr("src"));
   				var four = getNum($("#four").attr("src"));
   				
   				//判断结果是否相等
   				var flag = same(one,two,three,four);  //flag:true|false	


   				return flag;
   			}


   			//截取图片路径的名称
   			//getNum("123.png") ==> 123
   			function getNum(img){
   				var num = img.substring(img.length - 5,img.length - 4);
   				return num;
   			}


   			//判断多个数值是否都相等
   			//利用arguments获取传入函数的变量
   			//same(1,1,1,1) ==> true
   			function same(){
   				var count = arguments.length;
   				var flag = true;


   				for (var i =  0; i <count-1; i++) {
   					  if(arguments[i] != arguments[i+1]){
   					  	flag = false;
   					  	break;
   					  }
   				};


   				return flag;
   			}




   			//图片滚动
   			function change(){
   				$("#one").attr("src",getImg());
   				$("#two").attr("src",getImg());
   				$("#three").attr("src",getImg());
   				$("#four").attr("src",getImg());
   			}


   			//在预加载图片库中随机抽取图片，并返回给调用处
   			//getImg() ==> "1.png"
   			function getImg(){
   				var i = Math.random();
   				var n = Math.round(i*10) % 5; // n:[0-4]
   				return images[n].src;
   			}

上代码：

<html>
	<head>
		<title>Lottery</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
		</script>
		<style type="text/css">
            img{
            	border:2px solid #888888;
				border-radius:5px;
				-moz-border-radius:5px;
				box-shadow: 2px 2px 2px #888888;
            }
		</style>
	</head>

	<body>
		<img src="0.png" id="one"/>
		<img src="0.png" id="two"/>
		<img src="0.png" id="three"/>
		<img src="0.png" id="four"/>

		<input type="button" id="start" value="start" />
		<input type="button" id="stop" value="stop" />
	</body>
</html>

下载源码：http://download.csdn.net/detail/mchange/4469194

在线演示：https://diary.jelastic.servint.net/

Mchange

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html + js实现抽奖纯属娱乐

window.onload = function(){ //预加载图片 images = new Array(); for(var i=0; i<5; i++){ var img = new Image(); img.src = "img/" + i + ".png"; images[i]
复制链接

扫一扫