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] = 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  "1.png"
   			function getImg(){
   				var i = Math.random();
   				var n = Math.round(i*10) % 5; // n:[0-4]
   				return images[n].src;
   			}

上代码:


	
		Lottery
		
		
		
	

	
		
		
		
		

		
		
	

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

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


你可能感兴趣的:(前端,html)