基本思路javascript
1.循环出1到33的dom结构。css
2.获取要生成几个数。java
3.将不重复的数字放入一个数组。重复的不存入,再生成一个新的数字。jquery
4.将生成的数组遍历出来。数组
//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"> <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> </div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> $(function(){ for (var i = 1; i <34; i++) { //生成dom对象 if(i<10){ //小于10的数字在前边加0 $(".number1").append('<li>0'+i+'</li>'); }else if(i>=10){ $(".number1").append('<li>'+i+'</li>'); } } //获取要生成几个数 var counts=$(".select").val(); $(".select").change(function(){ counts=$(this).val(); }); $('.btn1').click(function(){ $('.number1 li').removeClass('on'); var arr=[]; //先建立一个数组 for(var i=0;arr.length<counts;i++){ //判断数组的长度是否达到设定的个数 var num=Math.ceil(33*Math.random()); //33*Math.random() 生成0-33之间的随机数(不包含0,33),而后Math.ceil()用方法向上取整获得1-33之间的一个整数。 if(arr.indexOf(num)==-1){ //判断若是arr数组中不存在num这个数,将其存入数组arr。 arr.push(num); } } console.log(arr); for(var a in arr){ //遍历出数组中的全部值,并将其所对应的索引值附加css样式。由于索引值是从0开始计算的,因此要-1。 $('.number1 li').eq(arr[a]-1).addClass('on'); } }) })
1.val()方法app
val() 方法返回或设置被选元素的 value 属性。dom
2.change()函数
当元素的值发生改变时,会发生 change 事件。this
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。spa
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
3.ceil()
eil() 方法执行的是向上取整计算,它返回的是大于或等于函数参数,而且与之最接近的整数。
4.random()
random() 方法可返回介于 0 ~ 1 之间的一个随机数。
语法:
Math.random()
5.indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。