js入门抽奖小案例

主要运用的就是随机数以及点击事件，每个数字绑定一个奖项，通过随到的数字来确定抽到的是什么。

css部分：

​.box{
	margin: 0 auto;
	width: 1000px;
	height: 750px;
	background-image: url(img/back.png);
	}
#btn{
	background-color: #0055FF;
	border: none;
	width: 200px;
	height: 30px;
	color: white;
	margin-top: 90px;
	margin-left: 600px;
}

​

HTML部分：

<div class="box">
		<button type="button" id="btn">点击开始抽奖</button>
</div>

JS部分：

var otitle = document.getElementById('btn');
	otitle.onclick = toggle;
	function toggle() {
	var num=parseInt(10*Math.random());
	if(num==1){
		alert("黄焖鸡");
    }else if(num==2){
		alert("拌饭");
	}else if(num==3){
		alert("家常菜");
	}else if(num==4){
		alert("披萨");
	}else if(num==5){
		alert("KFC");
	}else if(num==6){
		alert("面条");
	}else if(num==7){
		alert("小龙虾");
	}else if(num==8){
		alert("大闸蟹");
	}else if(num==9){
		alert("泡面");
	}else{
		alert("再抽一次");
	}
}

给button按钮绑定一个点击事件，点击一次之后就会进行事件，事件内容就是一个随机数的判断，随到哪个对应的数字就进行对应的菜名输出。