boton doble funcion

[jearj]

Hola a todos

De nuevo necesito vuestra ayuda.

Ya tengo mi proyecto totalmente terminado, pero me gustaría añadirle un par de cosas.

Este script es un contador regresivo y me gustaría que se volviera a cero cuando esta contando y vuelves a hacer al boton.

Otra cosa son las alertas: Tenia una que al acabar salía una alerta con un mensaje, pero la suprimí porque no era lo que necesitaba. Lo que me gustaría es que cuando falten 10 para el 0 de un aviso de audio y cuando llegue a 0 de otro aviso diferente también de audio.

Saludos y gracias por la ayuda que me estáis dando.

Este es mi script:

function myFunction() {
var count = 60;
var number = document.getElementById('numero');
var intervalo = setInterval(function(){
count--;
number.innerHTML = count;
if(count == 0){
clearInterval(intervalo);
}
}, 1000);
}


<p id="numero">60</p>


<input type=button value="TIEMPO" onclick="myFunction();">

[Alexis88]

Para los sonidos, puedes utilizar el elemento <audio>, cargar el archivo de audio que corresponda según como vaya la cuenta y, finalmente, reproducirlo con el método .play(). Como quieres que se reproduzcan dos sonidos distintos, solo tendrás que utilizar dos condiciones.

En cuanto a esto:

Iniciado por jearj

Este script es un contador regresivo y me gustaría que se volviera a cero cuando esta contando y vuelves a hacer al boton.

Te voy a pedir que seas más claro en la explicación. No sé si quieres que se reinicie la cuenta de forma automática, lo cual se solucionaría volviendo a ejecutar la función, u otra cosa.

Un saludo

[jearj]

Iniciado por Alexis88

Para los sonidos, puedes utilizar el elemento <audio>, cargar el archivo de audio que corresponda según como vaya la cuenta y, finalmente, reproducirlo con el método .play(). Como quieres que se reproduzcan dos sonidos distintos, solo tendrás que utilizar dos condiciones.

En cuanto a esto:

Te voy a pedir que seas más claro en la explicación. No sé si quieres que se reinicie la cuenta de forma automática, lo cual se solucionaría volviendo a ejecutar la función, u otra cosa.

Un saludo

Gracias por contestar

Perdona, quise poner "a hacer clic al boton

me gustaría que se volviera a cero cuando esta contando y vuelves a hacer clic al boton.

En cuanto a lo otro, lo intentare como dices, aunque no se si sabré

Saludos

[jearj]

No lo consigo.

function myFunction() {
var count = 60;
var number = document.getElementById('numero');
var intervalo = setInterval(function(){
count--;
number.innerHTML = count;
if(count == 0){
clearInterval(intervalo);
alert("Ya");
}
if(count == 10){
clearInterval(intervalo);
alert("Quedan 10 segundos");
}
}, 1000);
}

Lo que quiero es sustituir esto alert("Ya"); por un archivo de audio.

La idea es que reproduzca un audio cuando falten 10 segundos para terminar, y otro audio diferente cuando termina en 0, todo esto sin parar de contar hasta llegar al 0.


Gracias.

[Alexis88]

Lo que veo es lo que explicaste antes de que comentara. Me gustaría ver el código que escribiste luego de lo que te sugerí hacer para así poder ayudarte apropiadamente.

[jearj]

Iniciado por Alexis88

Lo que veo es lo que explicaste antes de que comentara. Me gustaría ver el código que escribiste luego de lo que te sugerí hacer para así poder ayudarte apropiadamente.

Lo Mas que es conseguido a sido esto:

function cronometro() {
var count = 20;
var number = document.getElementById('numero');
var intervalo = setInterval(function(){
count--;
number.innerHTML = count;
if(count == 10){

alert("10 Segundos");
}
if(count == 0){
clearInterval(intervalo);
alert("Tiempo");
}
}, 1000);
}

<p id="numero">20</p>
<br style="clear:both;">
<input type=button value="TIEMPO" onclick="cronometro();">

Todo lo que he probado con audio no me ha funcionado.

y en cuanto a lo de parar la cuenta atrás para que vuelva al numero inicial tampoco lo he logrado.

La verdad es que no soy muy bueno con el JavaScript.

[Alexis88]

Iniciado por jearj

Todo lo que he probado con audio no me ha funcionado.

Pues precisamente eso es lo que quiero ver.

Iniciado por jearj

y en cuanto a lo de parar la cuenta atrás para que vuelva al numero inicial tampoco lo he logrado.

¿Lo intentaste como te lo sugerí, es decir, volviendo a invocar a la función?

Por favor, muéstranos el código actualizado, con los intentos que hayas realizado. Y, por favor, utilizar el highlight respectivo para mostrar el código.

[jearj]

Esto No funciona

Código Javascript:

function cronometro() {
var count = 20;
var number = document.getElementById('numero');
var intervalo = setInterval(function(){
                   count--;
                   number.innerHTML = count;
 if(count == 10){
audioElement.setAttribute('src', audio1);
audioElement.play();
 }
 
cronometro() {
var count = 20;
var number = document.getElementById('numero');
var intervalo = setInterval(function(){
                   count--;
                   number.innerHTML = count;
 if(count == 0){
clearInterval(intervalo);
audioElement.setAttribute('src', audio2);
audioElement.play();
 }
 }, 1000);
 }
 

No hace nada mas que contar

Código Javascript:

function cronometro() {
var count = 20;
var number = document.getElementById('numero');
var intervalo = setInterval(function(){
                   count--;
                   number.innerHTML = count;
 if(count == 10){
audioElement.setAttribute('src', audio1);
audioElement.play();
 }
 
 if(count == 0){
clearInterval(intervalo);
audioElement.setAttribute('src', audio2);
audioElement.play();
 }
 }, 1000);
 }
 

Código HTML:

<audio id="audio1" src="1.mp3" preload="auto"></audio>
<audio id="audio2" src="2.mp3" preload="auto"></audio>
 
 
<p id="numero">20</p>
 
<input type=button value="TIEMPO" onclick="cronometro(); PlaySound('tiempo.MP3');">
 

Otros no hacen mas que contar y cuando llegan a 0 ni se paran, siguen contando -1 -2 -3 y demás.

Podría pasarme el dia poniendoros pruebas y no veriais mas, que no soy programador.

Yo lo que mas hago es diseño Web, maquetacion, style, graficos, videos, de todo un poco, incluso algo en php, base de datos etc.

En cuanto a la programacion con script, a penas nada. Mas que nada por el idioma, a penas se del ingles, y tampoco entiendo mucho los terminos que usais los programadores.

Cuando necesito alguna funcion de javascript, la busco por internet y lo mas que hago es adaptarla a lo que necesito.

No escribo solo busco y adapto.

Si por favor podeis ayudarme con esto, os estare muy agradecido y podre seguir con otras muchas cosas que tengo pendientes y otras a medias.

Soy padre de familia numerosa y tambien trabajo, esto que hago, son favores por los que no cobro nada, y mi tiempo es limitado

Gracia y Saludos.

[Alexis88]

Ahora sí se te puede ayudar.

No estás obteniendo resultados positivos porque, para empezar, la variable audioElement no hace referencia a ningún elemento en particular. Necesitas tomar a los elementos <audio> y asignarlos a dos variables distintas:

Código Javascript:

var audio1 = document.getElementById("audio1"),
    audio2 = document.getElementById("audio2");
 

Y como veo que ya les asignaste los archivos de audio respectivos, una vez cumplido el tiempo, solo tienes que ejecutarlos:

Código Javascript:

if (count == 10){
    audio1.play();
}
if (count == 0){
    clearInterval(interval);
    audio2.play();
}
 

Quedando todo así:

Código Javascript:

function cronometro() {
    var count = 20,
        number = document.getElementById('numero'),
        audio1 = document.getElementById("audio1"),
        audio2 = document.getElementById("audio2"),
        intervalo = setInterval(function(){
            count--;
            number.innerHTML = count;
            if (count == 10){
                audio1.play();
            } 
            if(count == 0){
                clearInterval(intervalo);
                audio2.play();
                cronometro();
            }
        }, 1000);
}
 

Una vez que la cuenta llega a cero, se detiene al temporizador y se reproduce el sonido, se vuelve a ejecutar la función para que se inicie la cuenta. Otra forma consiste en simplemente asignar el valor inicial a la variable count:

Código Javascript:

if (count == 0){
    audio2.play();
    count = 20;
}
 

Como el temporizador cíclico sigue su curso, ya no hará falta volver a ejecutarlo.

Y eso sería todo.

En cuanto a tu comentario final, creo que no era necesario. Aquí no se ayuda porque alguien tenga otras responsabilidades ajenas a la informática, pues todos las tenemos. El fin es colaborar con otros colegas para que la comunidad sea cada vez más grande y sólida, teniendo como plus el aprender al ayudar. Si te pedí insistentemente el código fue porque ha habido muchos casos de gente que acude al foro con el único propósito de que les hagan el trabajo gratis, algo con lo cual estoy completamente en desacuerdo; no solo porque literalmente se trabajaría gratis, sino porque, la persona que pide ayuda, jamás aprenderá. Quien no comparta sus conocimientos, sea cual sea el área de acción en la cual se encuentre, solo contribuye a la mediocridad.

«Regala un pescado a un hombre y le darás alimento para un día, enseñale a pescar y lo alimentarás para el resto de su vida» — Proverbio chino

Suerte en tus proyectos. Un saludo.

[jearj]

Gracias Alexis88 por tu paciencia, estoy de acuerdo con trigo, aunque se te olvido mencionar algo muy significativo, que es la gran labor que hacéis con estos foros a la hora de embellecer y hacer más funcional la red. No es muy agradable ver la basura que nos encontramos al abrir ciertas Web, por no hablar de la estética.
Pero antes de que se te agote la paciencia, me gustaría abusar un poco más de tus conocimientos.

Este es el proyecto que estoy realizando:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>
<title>Marcador Billar para Tablet</title>
<BGSOUND SRC="inicio.mp3">
</head>
 
<body onLoad="ini();">
 
<style type="text/css"><!-- A:link {text-decoration:none} A:visited {text-decoration:none} --></style>
 <audio id="audio1" src="aviso.MP3" preload="auto"></audio>
<audio id="audio2" src="finalizado.MP3" preload="auto"></audio>
<div id="wrapper">
     <div id="header">
<input class="Jugador1" type=text value=JUGADOR-1 onclick="javascript:inc_count('0');">
<span class="Titulo">MARCADOR</span>
<input class="Jugador2" type=text value=JUGADOR-2 onclick="javascript:inc_count('0');">
     </div>
<br style="clear:both;">
     <div id="column_left">
   <form name="calc">
<input class="Entradas2" type="button">
<input class="Marcador1" type="button" name="operando1" value="0" size="12" id="Marcador1" onclick="calcula('/'); PlaySound('prmedio.mp3');">
     <input class="Promedio1" type="button" name="resultado" value="Promedio 1" size="12" onclick="resultado">
<br style="clear:both;">
     <div align="center" id="column_left2">
<input class="Boton1" type=button value=1 onclick="inc_count1('Marcador1'); PlaySound('una.mp3');">
<input class="Boton1" type=button value=2 onclick="inc_count2('Marcador1'); PlaySound('dos.mp3');">
<input class="Boton1" type=button value=3 onclick="inc_count3('Marcador1'); PlaySound('tres.mp3');">
<input class="Boton1" type=button value=4 onclick="inc_count4('Marcador1'); PlaySound('cuatro.mp3');">
<input class="Boton1" type=button value=5 onclick="inc_count5('Marcador1'); PlaySound('cinco.mp3');">
<input class="Boton1" type=button value=6 onclick="inc_count6('Marcador1'); PlaySound('seis.mp3');">
<input class="Boton1" type=button value=7 onclick="inc_count7('Marcador1'); PlaySound('siete.mp3');">
<input class="Boton1" type=button value=8 onclick="inc_count8('Marcador1'); PlaySound('ocho.mp3');">
<input class="Boton1" type=button value=9 onclick="inc_count9('Marcador1'); PlaySound('nueve.mp3');">
<br style="clear:both;">
     <div id="column_left3">
<input class="BotonMas1 BotonMas1-1" type=button value=+ onclick="javascript:inc_count1('Marcador1'); javascript:PlaySound('una.mp3');">
<input class="BotonMenos1 BotonMenos1-1" type=button value=- onclick="javascript:inc_countMenos('Marcador1'); javascript:PlaySound('menos.mp3');">
         </div>
         </div>
           </div>
         <div align="center" id="column_centro">
     <input class="BotonInicio" type=button value="INICIO" id="iniciar" onclick="document.location.reload();">
<br style="clear:both;">
<input class="Entradas" type="button" name="operando2" value="0" size="12" id="Entradas" onclick="calcula('/')">
</form>
<br style="clear:both;">
<input align="center" class="BotonBorrar" type=button value=BORRAR onclick="javascript:inc_countBorrarEntradas(); javascript:PlaySound('entradaBorrada.mp3');">
<input align="center" class="BotonEntradas" type=button value=ENTRADA onclick="javascript:inc_countSumarEntradas(); javascript:PlaySound('entrada.mp3');">
 
<br style="clear:both;">
 
<br style="clear:both;">
    <p align="center" class="Tiempo" id="numero">50</p>
<br style="clear:both;">
<input align="center" class="BotonTiempo" type=button value="TIEMPO" onclick="PlaySound('tiempo.mp3'); cronometro();">
           </div>
         <div id="column_right">
<form name="calc2">
<input class="Entradas2" type="button" name="operando2" value="0" size="12" id="Entradas2" onclick="calcula('/')">
<input class="Marcador2" type="button" name="operando3" value="0" size="12" id="Marcador2" onclick="calcula2('/'); javascript:PlaySound('promedio.mp3');">
      <input class="Promedio2" type="button" name="resultado2" value="Promedio 2" size="12" onclick="resultado2">
 </form>
<br style="clear:both;">
<div align="center" id="column_right2">
<input class="Boton2" type=button value=9 onclick="inc_count9('Marcador2'); PlaySound('nueve.mp3');">
<input class="Boton2" type=button value=8 onclick="inc_count8('Marcador2'); PlaySound('ocho.mp3');">
<input class="Boton2" type=button value=7 onclick="inc_count7('Marcador2'); PlaySound('siete.mp3');">
<input class="Boton2" type=button value=6 onclick="inc_count6('Marcador2'); PlaySound('seis.mp3');">
<input class="Boton2" type=button value=5 onclick="inc_count5('Marcador2'); PlaySound('cinco.mp3');">
<input class="Boton2" type=button value=4 onclick="inc_count4('Marcador2'); PlaySound('cuatro.mp3');">
<input class="Boton2" type=button value=3 onclick="inc_count3('Marcador2'); PlaySound('tres.mp3');">
<input class="Boton2" type=button value=2 onclick="inc_count2('Marcador2'); PlaySound('dos.mp3');">
<input class="Boton2" type=button value=1 onclick="inc_count1('Marcador2'); PlaySound('una.mp3');">
<br style="clear:both;">
<div id="column_right3">
<input class="BotonMas1 BotonMas1-2" type=button value=+ onclick="javascript:inc_count1('Marcador2'); javascript:PlaySound('una.mp3');">
<input class="BotonMenos1 BotonMenos1-2" type=button value=- onclick="javascript:inc_countMenos('Marcador2'); javascript:PlaySound('menos.mp3');">
         </div>
         </div>
</body>
</html>
 

Ya sé que es una chapuza, pero funciona, y con eso me vale.

Como ves no me habéis hecho todo el trabajo, pero si una parte muy importante de ello, por lo que estoy muy agradecido.

Ahora para terminar lo que necesito es que el contador regresivo se pueda parar manualmente para poder reiniciarlo sin tener que esperar a que termine su cuenta regresiva.

Como habrás visto, es un marcador deportivo para el billar de carambolas a 3 bandas, al cual se le va a dar un buen uso por los sitios donde me muevo.

Como es de suponer, cuando un jugador acaba su turno, antes de el contador regresivo acabe, no se puede esperar que el contador acabe su cuenta regresiva para inicie su tuno el siguiente jugador, debe poder pararse la cuenta para volver a reiniciarla, y me da igual que use el mismo botón u otro botón.

Creo que esto es lo que necesito:

Código Javascript:

<script>
function funcion_reiniciar(){
document.getElementById("id_formulario").reset();
}
</script>
 
<form id="id_formulario">
<input type="button" value="Reiniciar" onClick="funcion_reiniciar();">
</form>
 

Pero no sé cómo agregarlo al script para que funcione, y te puedo asegurar que he hecho varias pruebas inútiles.

Aquí tienes de nuevo el script de los ensayos:

Código HTML:

<html>
<HEAD>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <title>Prueba1</title>
<script type="text/javascript">
 
function PlaySound(path) {
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', path);
  audioElement.play();
}
</script>
 
<script type="text/javascript">
function cronometro() {
    var count = 20,
        number = document.getElementById('numero'),
        audio1 = document.getElementById("audio1"),
        audio2 = document.getElementById("audio2"),
        intervalo = setInterval(function(){
            count--;
            number.innerHTML = count;
            if (count == 10){
                audio1.play();
            }
            if(count == 0){
                clearInterval(intervalo);
                audio2.play()
            }
        }, 1000);
}
</script>
</HEAD>
<body>
<style type="text/css"><!-- A:link {text-decoration:none;img-decoration:none} A:visited {text-decoration:none;img-decoration:none} --></style>
 <audio id="audio1" src="click.MP3" preload="auto"></audio>
<audio id="audio2" src="entrada.mp3" preload="auto"></audio>
 
         <div align="center" id="column_centro">
<br style="clear:both;">
<br style="clear:both;">
<p align="center" class="Tiempo" id="numero">20</p>
<br style="clear:both;">
<input align="center" class="BotonTiempo" type=button value="TIEMPO" onclick="cronometro(); PlaySound('tiempo.MP3');">
           </div>
</body>
</html>
 

El marcador es una versión para Tablet y la verdad es que en la web funciona perfectamente, pero en androide los audios salen retardados lo cual es un coñazo. Y la versión .apk para instalarla y no necesitar internet para usarla, no me funciona los audios; aunque sería lo ideal que funcionaran porque el uso será prácticamente con Tablet.

Ya sé que soy un pesado, pero por favor

Saludos y Gracias por leerme y las molestias.

[jearj]

Como no cavia en el otro, aquí te pongo el js y el css del proyecto:

SCRIPT:

Código Javascript:

function PlaySound(path) {
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', path);
  audioElement.play();
}
 
 
function cronometro() {
    var count = 50,
        number = document.getElementById('numero'),
        audio1 = document.getElementById("audio1"),
        audio2 = document.getElementById("audio2"),
        intervalo = setInterval(function(){
            count--;
            number.innerHTML = count;
            if (count == 10){
                audio1.play();
            }
            if(count == 0){
                clearInterval(intervalo);
                audio2.play();
            }
        }, 1000);
}
 
 
 function calcula(operacion){
 var operando1 = document.calc.operando1.value;
 
 var operando2 = document.calc.operando2.value;
 var result = eval(operando1 + operacion + operando2);
 document.calc.resultado.value = result ;
 }
 
 
 function calcula2(operacion){
 var operando3 = document.calc2.operando3.value;
 var operando2 = document.calc2.operando2.value;
 var result = eval(operando3 + operacion + operando2);
 document.calc2.resultado2.value = result ;
 }
 
 
                function inc_countSumarEntradas()
                {
                        var input1 = document.getElementById('Entradas');
                        var input2 = document.getElementById('Entradas2');
 
                        input1.value = parseInt(input1.value) + 1;
                        input2.value = parseInt(input2.value) + 1;
                }
                 function inc_countBorrarEntradas()
                {
                        var input1 = document.getElementById('Entradas');
                        var input2 = document.getElementById('Entradas2');
 
                        input1.value = parseInt(input1.value) - 1;
                        input2.value = parseInt(input2.value) - 1;
                }
 
 
 function inc_countMenos(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)-1;
}
 
 function inc_count1(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+1;
}
 
function inc_count2(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+2;
}
 
function inc_count3(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+3;
}
function inc_count4(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+4;
}
 
function inc_count5(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+5;
}
 
function inc_count6(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+6;
}
 
function inc_count7(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+7;
}
 
function inc_count8(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+8;
}
 
function inc_count9(id)
{
res = document.getElementById(id);
res.value = parseInt(res.value)+9;
}
 

[jearj]

Esto lo pongo en dos partes porque el foro no lo admite entero.

CSS:

Código CSS:

html {
 width:100%;max-width:1010px;min-width:1010px;
 height:100%;max-height:500px;min-height:500px;
 background-color: #000;
}
body {
 width:100%;max-width:100%;min-width:100%;
 height:100%;max-height:100%;min-height:100%;
 background-color: #000; overflow: hidden;
 
}
.Titulo{
 position:relative;
 text-align:center;
 font-weight:700;
 font-size:35px;
 font-face:Board;
 color:#dd2222;
 line-height:50px;
 
font: bold Colonna MT, Sans-Serif; text-align: center;
    text-transform: uppercase; text-decoration: none;
    color: #dd2222;
    text-shadow: 2px 2px 4px 4px #00aabb;
}
.Jugador1{
 position:relative;
 float:left;
 width:35%;
 height:50px;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 text-align:center;
 font-weight:700;
 font-size:35px;
 font-face:Board;
 color:#888;
 line-height:50px;
 background-color:#000;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding-top:0px;;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
.Jugador2{
 position:relative;
 float:right;
 width:35%;
 height:50px;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 line-height:50px;
 text-align:center;
 font-weight:700;
 font-size:35px;
 font-face:Board;
 color:#888;
 background-color:#000;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding-top:0px;;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
.Marcador1{
 position:relative;
 float:left;
 width:95%;max-width:95%;min-width:95%;
 height:240px;max-height:240px;min-height:240px;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 line-height:240px;
 text-align:center;
 font-weight:500;
 font-size:240px;
  font-face:Board;
 color:#ff0000;
 background-color:#000;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
 
.Boton1{
 position:relative;
 float:left;
 width:30px;
 height:30px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bootom:2px solid #555;
 text-align:center;
  line-height:28px;
 font-weight:700;
 font-size:18px;
 color:#fff;
 cursor:pointer;
 background-color:#314EBF;
 margin-top:15px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:10px;
 padding:0px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
 
.Boton1:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.BotonInicio{
 position:relative;
 float:center;
 width:90px;
 height:40px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
 text-align:center;
 font-weight:500;
 font-size:20px;
 color:#fff;
 cursor:pointer;
 background-color:#119911;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
 
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
 }
 
 .BotonInicio:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.Entradas{
 position:relative;
 width:85%;max-width:85%;min-width:85%;
 height:130px;max-height:130px;min-height:130px;
 float:center;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 text-align:center;
 font-weight:700;
 font-size:105px;
 font-face:Board;
 color:#00ff00;
 background-color:#000;
 margin-top:20px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
.Entradas2{
 width:0px;
 height:0px;
  background-color:#000;
 border-top:0px solid #000;
 border-left:0px solid #000;
 border-right:0px solid #000;
 border-bottom:0px solid #000;
}
 
 
.BotonEntradas{
 position:relative;
 float:right;
 width:80px;
 height:35px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
  line-height:30px;
 text-align:center;
 font-weight:500;
 font-size:12px;
 color:#fff;
 cursor:pointer;
 background-color:#1111FF;
 margin-top:20px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
 
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
 
.BotonEntradas:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.BotonBorrar{
 position:relative;
 float:left;
 width:80px;
 height:35px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
  line-height:30px;
 text-align:center;
 font-weight:500;
 font-size:12px;
 color:#fff;
 cursor:pointer;
 background-color:#991111;
 margin-top:20px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
 
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
 
.BotonBorrar:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.Tiempo{
 position:relative;
 float:center;
  width:110px;
 height:60px;
 text-align:center;
 line-height:70px;
 font-weight:700;
 font-size:60px;
 color:#fff;
  background-color:#000;
 margin-top:20px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
}
 

[jearj]

Parte 2 CSS:

Código CSS:

.BotonTiempo{
 position:relative;
 float:center;
 width:70px;
 height:30px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
 text-align:center;
 font-weight:500;
 font-size:12px;
 color:#fff;
 cursor:pointer;
 background-color:#444;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
 
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
 
.BotonTiempo:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.BotonMenos1{
 position:relative;
 width:35px;
 height:35px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
 text-align:center;
 line-height:20px;
 font-weight:700;
 font-size:31px;
 font-face:Board;
 color:#fff;
 cursor:pointer;
 background-color:#991111;
 margin-top:10px;
 margin-bottom:20px;
 margin-left:20px;
 margin-right:20px;
 padding-bottom:30px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
 
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
.BotonMenos1-1{
 position:relative;
 float:right;
 }
 .BotonMenos1-2{
 position:relative;
 float:left;
 }
.BotonMenos1:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
.BotonMas1{
 position:relative;
 width:35px;
 height:35px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
 text-align:center;
 line-height:33px;
 font-weight:700;
 font-size:30px;
 font-face:Board;
 color:#fff;
 cursor:pointer;
 background-color:#119911;
 margin-top:10px;
 margin-bottom:20px;
 margin-left:20px;
 margin-right:20px;
 padding:0px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
 
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
.BotonMas1-1{
 position:relative;
 float:right;
}
.BotonMas1-2{
 position:relative;
 float:left;
}
.BotonMas1:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.Marcador2{
 position:relative;
 width:95%;max-width:95%;min-width:95%;
 height:240px;max-height:240px;min-height:240px;
 float:right;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 line-height:240px;
 text-align:center;
 font-weight:500;
 font-size:240px;
  font-face:Board;
 color:#ff0000;
 background-color:#000;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
.Boton2{
 position:relative;
 float:right;
 width:30px;
 height:30px;
 border-top:2px solid #555;
 border-left:2px solid #555;
 border-right:2px solid #555;
 border-bottom:2px solid #555;
 text-align:center;
 line-height:28px;
 font-weight:700;
 font-size:18px;
 color:#fff;
 cursor:pointer;
 background-color:#314EBF;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:10px;
 padding:0px;
 
-webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
-moz-border-radius: 20px; /* Firefox */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 20.50, IE y CSS3 */
-webkit-border-radius: 20px; /* Safari y Chrome */
}
 
 
 
.Boton2:hover{
 background:-moz-linear-gradient(#627EBF);
 color:#000;
 background:#fff;
}
 
.Promedio1{
 position:relative;
 float:left;
 width:95%;
 height:60px;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 text-align:center;
 line-height:45px;
 font-weight:700;
 font-size:31px;
 font-face:Board;
 color:#888;
 background-color:#000;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
.Promedio2{
 position:relative;
 float:right;
 width:95%;
 height:60px;
 border-top:5px solid #0000ff;
 border-left:5px solid #0000ff;
 border-right:5px solid #0000ff;
 border-bottom:5px solid #0000ff;
 text-align:center;
 line-height:40px;
 font-weight:700;
 font-size:31px;
 font-face:Board;
 color:#888;
 background-color:#000;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 
font-family:Stencil; text-transform:uppercase; text-decoration: none;
 
-webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
-moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
 
-moz-border-radius: 7px; /* Firefox */
-khtml-border-radius: 7px; /* Konkeror, ... */
border-radius: 7px; /* Opera 10.50, IE y CSS3 */
-webkit-border-radius: 7px; /* Safari y Chrome */
}
 
#wrapper {
     width:100%;
     height:auto;
     background-color:#000;
 padding-top:10px;
 
 padding-bottom:10px;
 padding-left:10px;
 padding-right:10px;
}
#header {
     height:5px;
     background-color:#000;
      text-align:center;
 font-weight:700;
 font-size:36px;
 font-face:Board;
 color:#dd2222;
 padding-top:0px;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:0px;
}
#column_left {
     float:left;
 line-width:39%;
 width:38%;max-width:38%;min-width:38%;
      height:auto;
     background-color:#000;
}
#column_left2 {
     float:left;
 line-width:98%;
 width:98%;max-width:98%;min-width:98%;
     height:auto;
     background-color:#000;
      padding-left:8px;
}
#column_left3 {
     float:left;
 line-width:98%;
 width:98%;max-width:98%;min-width:98%;
     height:auto;
     background-color:#000;
      padding-left:0px;
}
#column_centro {
     float:left;
 line-width:22%;
 width:22%;max-width:22%;min-width:22%;
     height:auto;
     background-color:#000;
 padding-top:0px;
 padding-bottom:0px;
 padding-left:10px;
 padding-right:0px;
}
#column_right {
     float:right;
 line-width:39%;
 width:38%;max-width:38%;min-width:38%;
     height:auto;
     background-color:#000;
}
#column_right2 {
     float:right;
 line-width:98%;
 width:98%;max-width:98%;min-width:98%;
     height:auto;
     background-color:#000;
     padding-left:10px;
     padding-top:15px;
}
#column_right3 {
     float:right;
 line-width:98%;
 width:98%;max-width:98%;min-width:98%;
     height:auto;
     background-color:#000;
     padding-left:0px;
}
 
#footer {
     height:12px;
     background-color:#000;
}
 

[Alexis88]

Creo que si se va a reproducir el sonido según una condición dentro del temporizador, no será necesaria la función PlaySound(). En cuanto a la paralización de la cuenta regresiva utilizando el mismo botón, puedes utilizar una variable global en la cual se establecerá un valor inicial, por ejemplo, el valor booleano true; luego, cuando se ejecute la función, evalúa el valor de dicha variable; si es true, ejecutas el temporizador y cambias el valor de la variable por false, y cuando vuelvas a pulsar el botón una vez que ya esté ejecutándose la cuenta regresiva, establece el valor de la variable global en true para que cuando se vuelva a ejecutar el temporizador (al ser cíclico, se volverá a ejecutar automáticamente), detectes dentro del mismo el valor de la variable global, encontrando que su valor ahora es true y, por ende, se detendrá la ejecución del temporizador.

Código Javascript:

var control = true; //La variable global
 
function cronometro() {
    if (control){
        var count = 20,
            number = document.getElementById('numero'),
            audio1 = document.getElementById("audio1"),
            audio2 = document.getElementById("audio2"),
            intervalo = setInterval(function(){
                if(count == 0 || control){
                    clearInterval(intervalo);
                    audio2.play();
                    return;
                }
                count--;
                number.innerHTML = count;
                if (count == 10){
                    audio1.play();
                } 
            }, 1000);
        control = false;
    }
    else{
        control = true;
    }
}
 

Para evitar que se ejecuten las demás instrucciones una vez detenido el temporizador, se termina la ejecución de la función mediante la palabra reservada return.

Y solo como consejo, la próxima vez trata de mostrar solo la parte crítica del código. Cuando la gente ve bloques grandes de código, se desanima y decide no ayudar. No es algo que ocurre con todos pero sí con muchos; además, analizar código que no tiene que ver con el problema, solo conlleva a una pérdida de tiempo.

Un saludo

[jearj]

Gracias Alexis88 por tu ayuda y tus consejos.

Ya esta solucionado.

Le añadido un reset al final del script porque al llegar a 0 hay que dar dos clic para reiniciar la cuenta regresiva y reproducía dos veces el audio tiempo.mp3, el cual te agradezco tu consejo del PlaySound, pero es necesario el avise de que comienza el tiempo (Cuenta regresiva). Se que puede haber otros modo de hacerlo, pero yo no se otra forma y eso me soluciona ese tema.

Ahí os dejo el código por si a alguien le sirve:

Código Javascript:

function PlaySound(path) {
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', path);
  audioElement.play();
}
 
var control = true; //La variable global
 
function cronometro() {
    if (control){
        var count = 20,
            number = document.getElementById('numero'),
            audio1 = document.getElementById("audio1"),
            audio2 = document.getElementById("audio2"),
            intervalo = setInterval(function(){
                if(count == 0 || control){
                    clearInterval(intervalo);
                    audio2.play();
                    return;
                }
                count--;
                number.innerHTML = count;
                if (count == 10){
                    audio1.play();
                }
            }, 1000);
        control = false;
    }
    else{
        control = true;
reset();
    }
}
 

Código HTML:

<audio id="audio1" src="aviso.MP3" preload="auto"></audio>
<audio id="audio2" src="finalizado.mp3" preload="auto"></audio>
 
<p id="numero">20</p>
 
<input type=button value="TIEMPO" onclick="cronometro(); PlaySound('tiempo.MP3');">
 

Es una cuenta regresiva que avisa cuando inicia, cuando faltan 10 segundos y cuando acaba, pero seguro que ese script se puede usar para otras muchas cosas.

Saludos y muchas gracias por todo.

[Alexis88]

También podrías reproducir ese sonido la primera vez que se ejecuta la función cronometro(). En cuanto al tema de reiniciar la cuenta, como te expliqué antes, puedes volver a ejecutar la función.

[jearj]

He probado lo que me dices pero no me aclaro y no hago mas que estropearlo.

Me doy por satisfecho tal y como esta, además esto se va a usar prácticamente en Android y de todas formas en Android no funcionan los audios.

Gracias Alexis88.

Saludos

[Alexis88]

Para Android puedes usar esto.