JavaScript - Pasar a Segundos, minutos, horas, dias, semanas, meses y años

 
Vista:
Imágen de perfil de Geraldine
Val: 1
Ha disminuido su posición en 25 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Pasar a Segundos, minutos, horas, dias, semanas, meses y años

Publicado por Geraldine (1 intervención) el 17/04/2019 23:29:38
Buenas tardes, quería saber como puedo configurar un grupo de botones para que, al yo ingresar en un cuadro de texto el número con los botones indique que si es minutos, segundos,etc y que lo voy a transformar en horas, semanas,etc.

Esto es lo que llevo hecho:

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!--Titulo de la pagina-->
	<title>Convertidor</title>
 
	<!--Llamamos a las clases-->
	<link rel="stylesheet" type="text/css" href="styleConver.css">
	<script type="text/javascript" src="operaciones.js"></script>
</head>
<body>
	<form name="conversion">
	<!--Titulo dentro de la pagina-->
	<center>
	<h1>Convertidor de Tiempo</h1>
	<!-- Creamos el formato "div" para usar las hojas de estilo con los labels -->
	<div class="contenido">
		<!--Informacion-->
		<label>En primer lugar, ingrese el numero que desee convertir aqui:</label>
		<br>
		<!-- Creamos el cuadro de texto -->
		<input id="numero" type="text" name="numero" placeholder="Ingrese el digito">
	</div>
 
	<!-- Creamos un "div" para usar las hojas de estilo con los botones -->
	<div class="botones">
		<label>A continuacion, haga clic en los botones de opcion para la conversion<label>
	<!-- Creamos los botones De:-->
	<br>De:
	<button onclick="segundos()" id="segundos" class="boton">Segundos</button>
	<button onclick="minutos()" id="minutos" class="boton">Minutos</button>
	<button onclick="horas()" id="horas" class="boton">Horas</button>
	<button onclick="dias()" id="dias" class="boton">Dias</button>
	<button onclick="semanas()" id="semanas" class="boton">Semanas</button>
	<button onclick="meses()" id="meses" class="boton">Meses</button>
	<button onclick="años()" id="años" class="boton">Años</button>
 
	<!-- Creamos los botones A:-->
	<br>A:
	<button onclick="segundos2()" id="segundos" class="boton">Segundos</button>
	<button onclick="minutos2()" id="minutos" class="boton">Minutos</button>
	<button onclick="horas2()" id="horas" class="boton">Horas</button>
	<button onclick="dias2()" id="dias" class="boton">Dias</button>
	<button onclick="semanas2()" id="semanas" class="boton">Semanas</button>
	<button onclick="meses2()" id="meses" class="boton">Meses</button>
	<button onclick="años2()" id="años" class="boton">Años</button>
 
	<br>
	<!-- Creamos el cuadro donde mostrara el resultado -->
	<input id="solucion" type="text" name="resultado">
	<br>
	<!-- Creamos los botones Calcular y Limpiar:-->
	<div class="Calcular_Limpiar">
	<button onclick="calcular()" id="calcular" class="boton">Calcular</button>
	<button onclick="limpiar()" id="limpiar" class="boton">Limpiar</button>
	</div>
	</div>
	</form>
	</center>
</body>
</html>

Css
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
#numero{
	margin-top:6px;
	margin-bottom: 4px;
}
 
#solucion{
	margin-top:6px;
	margin-bottom: 4px;
}
 
#solucion{
	margin-top:10px;
}
 
#calcular{
	background: #ecf0f1;
	color: #FF0099;
	font-size: 18px;
	border: 0px;
  	word-spacing:0.225em;
}
 
#limpiar{
	background: #ecf0f1;
	color: #FF0099;
	font-size: 18px;
	border: 0px;
}
 
.contenido{
	align-content: center;
	background: #ecf0f1;
	border: 1px solid #000;
	border-radius: 2%;
	padding: 4px;
	padding-bottom: 6px;
	margin-left: 28%;
	margin-right: 28%;
}
 
.botones{
	align-content: center;
	background: #ecf0f1;
	border: 1px solid #000;
	border-radius: 2%;
	padding: 4px;
	padding-bottom: 6px;
	margin-left: 28%;
	margin-right: 28%;
}
 
 
.boton{
	margin-top:5px;
	margin-bottom: 1px;
	background: #CCCCCC;
	border: 1px solid #000;
	border-radius: 2%;
	padding-top: 10px;
	padding: 6px;
	border-radius: 5%;
	font-family: calibri bold;
	font-size: 14px;
}

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//Creamos una funcion
function limpiar(){
	//Declaramos un metodo que viene por default:
	clearInterval(Conversion_tiempo);
	}
 
function segundos(){
 
}
 
function calcular(){
	//Declaramos una variable:
	var numero=(document.conversion.numero.value)*1;
 
	if (numero==0) {
		alert("Se ha detectado el espacio en blanco, por favor ingrese un digito");
	}else if (segundos) {}{
	}
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 2.998
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Pasar a Segundos, minutos, horas, dias, semanas, meses y años

Publicado por xve (2096 intervenciones) el 18/04/2019 09:24:57
Hola Geraldine, en vez de llamar a una función diferente para cada selector de tiempo, puedes llamar a una sola función y pasar el tipo de tiempo "de" y "a"... algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<br>De:
<button onclick="de(this.id)" id="segundos" class="boton">Segundos</button>
<button onclick="de(this.id)" id="minutos" class="boton">Minutos</button>
<button onclick="de(this.id)" id="horas" class="boton">Horas</button>
<button onclick="de(this.id)" id="dias" class="boton">Dias</button>
<button onclick="de(this.id)" id="semanas" class="boton">Semanas</button>
<button onclick="de(this.id)" id="meses" class="boton">Meses</button>
<button onclick="de(this.id)" id="años" class="boton">Años</button>
 
<!-- Creamos los botones A:-->
<br>A:
<button onclick="a(this.id)" id="segundos" class="boton">Segundos</button>
<button onclick="a(this.id)" id="minutos" class="boton">Minutos</button>
<button onclick="a(this.id)" id="horas" class="boton">Horas</button>
<button onclick="a(this.id)" id="dias" class="boton">Dias</button>
<button onclick="a(this.id)" id="semanas" class="boton">Semanas</button>
<button onclick="a(this.id)" id="meses" class="boton">Meses</button>
<button onclick="a(this.id)" id="años" class="boton">Años</button>

y en tu código js, obtener los valores de los mismos...
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
var var_de,var_a;
 
//Creamos una funcion
function limpiar(){
	//Declaramos un metodo que viene por default:
	clearInterval(Conversion_tiempo);
}
 
function de(e){
	var_de=e;
}
function a(e){
	var_a=e;
}
 
function calcular(){
	console.log("aaa");
	//Declaramos una variable:
	var numero=(document.conversion.numero.value)*1;
 
	if (numero==0) {
		alert("Se ha detectado el espacio en blanco, por favor ingrese un digito");
	}else if (segundos) {}{
	}
}

Ahora en tu función calcular, ya puedes utilizar el "var_de" y el "var_a" para saber como tienes que convertir.


Espero que te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar