文档章节

js双色球随机抽取1到33内几个不相同的数

紫盒子
 紫盒子
发布于 2016/10/24 17:21
字数 638
阅读 645
收藏 0

基本思路

1.循环出1到33的dom结构。

2.获取要生成几个数。

3.将不重复的数字放入一个数组。重复的不存入,再生成一个新的数字。

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()方法

val() 方法返回或设置被选元素的 value 属性。

2.change()

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

3.ceil()

eil() 方法执行的是向上取整计算,它返回的是大于或等于函数参数,并且与之最接近的整数。

4.random()

random() 方法可返回介于 0 ~ 1 之间的一个随机数。

语法:

Math.random()

5.indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

 

© 著作权归作者所有

紫盒子
粉丝 4
博文 16
码字总数 10068
作品 0
郑州
私信 提问
谁说要从hello world开始的

今天学习python的时候发现,学习软件开发大多数的教程都是从hello开始的,我的都是从机选双色球开始的C/C++,JAVA,JS,PYTHON都是这样的 昨晚中五亿那人我好羡慕!!! import random def crea...

蛋疼的淡定哥
2011/07/27
155
0
探寻 JavaScript 精度问题

阅读完本文可以了解到 为什么等于 以及 中最大安全数是如何来的。 十进制小数转为二进制小数方法 拿 173.8125 举例如何将之转化为二进制小数。 ①. 针对整数部分 173,采取; 得整数部分的二进...

牧云云
2018/10/03
0
0
好程序员web前端教程分享JavaScript Math(算数)对象

  好程序员web前端教程分享JavaScript Math(算数)对象,这里小编每天也会分享一下干货给大家。那么今天说道的就是好程序员web前端培训课程中的章节。 JavaScript Math(算数) 对象 Math(算数...

好程序员IT
06/19
7
0
找错改错(Java基础的Random问题)

代码目的: 想让1~33个随机数字不重复地赋值到我所定义的doubleball.arrred数组中。 问题: 我想了一个方法,运行结果会出现两种情况, 一种是成功显示33个不重复的随机数字. 第二种就是问题...

摩斯儿绝
2018/07/23
325
7
WebAssembly Demo之Canvas中随机运动圆球

作者:云荒杯倾 1、Demo功能介绍 实现了一个圆球在800px * 600px画布内随机运动,固定时间间隔随机运动一次,运动方向由x和y轴组成的向量决定,这个向量是随机值(后面会称它为随机向量),从...

云荒杯倾
2017/09/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部