-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (130 loc) · 4.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="../jquery.js"></script> -->
<meta charset="utf-8">
<title>Generador de numeros aleatorios</title>
<link rel="stylesheet" href="css/style1.css" title="min-width:768px">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="countup.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
<div class="row" name= "numeros">
<center>
<h1>Generador de números aleatorios</h1>
<p>Números Totales:</p>
<div class="row">
<div class="col-md-12" >
<div class="col-md-12">
<input type="text" name="div1" id="div1" style="text-align: center; width: 100px;" value="20">
</div>
<br>
<p>Números Generados:</p>
</div>
<div class="row" name="d1" id="generated">
<div class="col-xs-6 col-md-4" name="d11" id="generated1">
<!-- <span type="text" name="number1" id="number1"></span> -->
</div>
<div class="col-xs-6 col-md-4" name="d12" id="generated2">
<!-- <span type="text" name="number2" id="number2"></span> -->
</div>
<div class="col-xs-6 col-md-4" name="d13" id="generated3">
<!-- <span type="text" name="number3" id="number3"></span> -->
</div>
</div>
<div class="row">
<br>
<div class="col-md-12">
<input id="generar" type="submit" name="button" value="Generar" >
</div>
</div>
</div>
</div>
<script type="text/javascript">
//recoge el numero maximo del campo de texto incial
var maxNumber=document.getElementById('div1').value;
// genera un numero aleatorio
function getRand(selected, maxNumber){
var random = Math.round(Math.random()* (maxNumber -1) + 1);
if (isInArray(selected, random)) {
return getRand(selected , maxNumber);
}else {
}
return random;
}
// rellena el array con valores los cuales no estan ya en el array
function fillValues(values){
var selected = [];
selected.push(values[0]);
selected.push(values[1]);
selected.push(values[2]);
console.log(selected);
return selected;
}
// muestra los valores del array
function isInArray(selected, random){
var a = selected.indexOf(random);
if (a==-1) {
return false;
}else{
return true;
}
return a!=-1;
}
//escribe los valores del array en los campos de texto
function writeValues(values){
var numero_aleatorios = values;
$("#generated1").text(numero_aleatorios[0]);
$("#generated2").text(numero_aleatorios[1]);
$("#generated3").text(numero_aleatorios[2]);
console.log(numero_aleatorios);
}
(function() {
randomBalls();
})();
//escucha el evento de click y llama a las funciones una a unaRoboto,Helvetica,Arial,sans-serif;
function randomBalls(){
var element= document.getElementById('generar');
element.addEventListener('click', function() {
var maxBalls =document.getElementById('div1').value
valuesExists = [];
balls = [];
//bucle que recorre maxBalls veces
var i;
for (i = 0; i < 3; i++) {
randomValue = getRand(valuesExists, maxBalls);
balls.push(randomValue);
valuesExists.push(randomValue);
};
//se acaba el bucle
values = fillValues(balls);
writeValues(values);
turnNumbers(values);
}, false);
}
//crea un array igual a los de arriba y con la libreria count up crea el efecto de los numeros
function turnNumbers(values){
var turn = [];
turn.push(values[0]);
turn.push(values[1]);
turn.push(values[2]);
var options = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
};
var demo1 = new CountUp("generated1", 0, turn[0], 0, 2.5, options);
var demo2 = new CountUp("generated2", 0, turn[1], 0, 5, options);
var demo3 = new CountUp("generated3", 0, turn[2], 0, 7.5, options);
demo1.start();
demo2.start();
demo3.start();
return turn;
}
</script>
</body>
</html>