用js写1-33随机抽取几个不同数字

2019独角兽企业重金招聘Python工程师标准>>>

//css
*{margin:0;padding:0;}
.main{width: 400px;padding:20px;}
ul{width: 400px;overflow: hidden;}
ul li{width: 30px;line-height: 30px;border-radius: 50%;text-align: center;background: #ededed;
color: #333;font-size: 16px;float: left;margin:10px;list-style: none;cursor: pointer;}
ul li.on{background: #f40 !important;color: #fff !important;}
.tools{overflow: hidden;}
.tools select{float: left;width: 100px;text-align: center;vertical-align: middle;
margin-left:200px;line-height: 32px;height: 32px;}
.btn{float: right;display: block;width: 80px;color: #fff;color:#f40;line-height: 32px;
border-radius: 4px;border:1px solid #f40;font-size: 14px;text-align: center;cursor: pointer;}

//dom
<div class="main" id="a">
		<ul class="number1"></ul>
		<div class="tools"><select class="select">
			<option selected>1</option>
            <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
           <option>6</option>
           <option>7</option>
           <option>8</option>
           <option>9</option>
			</select>	
			<span class="btn btn1">随机选号</span>
		</div>
		<ul>
			<li></li>
		</ul>
	</div>

//js
window.onload=function(){
			var ul=document.getElementsByClassName('number1')[0];

			for (var i = 1; i <34; i++) {
				var li=document.createElement("li");
				if(i<10){
					li.innerHTML='0'+i;
				}else if(i>=10){
					li.innerHTML=i;
				}
				ul.appendChild(li);
			}
			var li = ul.getElementsByTagName('li');

			var counts=document.getElementsByClassName('select')[0];
			var val =counts.value;
			counts.onchange=function(){
				val=this.value;
			}
			var btn=document.getElementsByClassName('btn1');
			console.log(btn);

			btn[0].onclick=function(){
				var arr=[];
				for(var i=0;arr.length<val;i++){
					var num=Math.ceil(33*Math.random());
					if(arr.indexOf(num)==-1){
						arr.push(num);
					}
				}
				console.log(arr);
				for (var i = 0; i < li.length; i++) {
					li[i].className="";
				}
				for(var a in arr){
					var value=arr[a];
					li[value-1].className="on";
				}
			}
		}

 

转载于:https://my.oschina.net/u/2958559/blog/774916