//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"; } } }