Foros del Web » Programando para Internet » Javascript »

JavaScript complicado.

 Estas en el tema de JavaScript complicado. en el foro de Javascript en Foros del Web. Haber si alguien me ayuda con este script, es un mapa del tiempo de provincias de España con distintos horarios, entonces lo que quiero es ...
  #1 (permalink)  
Antiguo 24/08/2013, 10:03
 
Fecha de Ingreso: junio-2013
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 0
JavaScript complicado.
Haber si alguien me ayuda con este script, es un mapa del tiempo de provincias de España con distintos horarios, entonces lo que quiero es eliminar la opciones de elegir provincias y que el mapa funcione solo con la provincia de Zaragoza y colocar un botón de animación, es decir que pulsado dicho botón o pulsador funcione automáticamente con dichos horarios.
Código html: 
Ver original
  1. <SCRIPT LANGUAGE="JavaScript"> 
  2.  
  3.  //VARIABLES
  4.  
  5.  var act = 1
  6.  var i=1
  7.  var t=1
  8.  var ts=1
  9.  var pulsado=0
  10.  var pulsadosat=0
  11.  var Fecha=new Date()
  12.  var tiempoact=Fecha.getTime()
  13.  var zulu=Fecha.getTimezoneOffset()
  14.  var selec=0
  15.  var fijado=1
  16.  var fijadosat=1
  17.  var cantidad=0
  18.  var porcentaje=0
  19.  var cantidadsat=0
  20.  var porcentajesat=0
  21.  
  22.  //ARRAYS
  23.  
  24.  anterior=new Array()
  25.  anteriorsat=new Array()
  26.  enlace=new Array()
  27.  enlacesat=new Array()
  28.  
  29.  fecharadar=new Array()
  30.  fecharadarlocal=new Array()
  31.  minutrad=new Array()
  32.  horarad=new Array()
  33.  horaradlocal=new Array()
  34.  diarad=new Array()
  35.  mesrad=new Array()
  36.  añorad=new Array()
  37.  minutradesp=new Array()
  38.  fechasat=new Array()
  39.  minut=new Array()
  40.  
  41.  fechasat=new Array()
  42.  minutsat=new Array()
  43.  horasat=new Array()
  44.  diasat=new Array()
  45.  messat=new Array()
  46.  añosat=new Array()
  47.  mapaid= new Array("ml","se","am","mu","cc","va","ma","pm","vd" ,"za","ba","co","sa","ss","ca","pb")
  48.  mapasatid= new Array("sp","eu")
  49.  satid= new Array("ir","vis")
  50.  
  51.  //CALCULO DE FECHAS
  52.  
  53.  //RADAR
  54.  
  55.  
  56.  for (i=1;i<=24;i++){
  57.  tiempo=tiempoact-(10*60*1000*i)+(zulu*60*1000)
  58.  tiempolocal=tiempoact-(10*60*1000*i)
  59.  fecharadar[i]=new Date(tiempo)
  60.  fecharadarlocal[i]=new Date(tiempolocal)
  61.  minutrad[i]= fecharadar[i].getMinutes()
  62.  minutrad[i]=parseInt(minutrad[i]/10)*10 //redondea los minutos a decimas
  63.  if (minutrad[i]==0){
  64.  minutrad[i]='00'
  65.  }
  66.  horarad[i]=fecharadar[i].getHours()
  67.  if (horarad[i]<10){
  68.  horarad[i]='0'+horarad[i]
  69.  }
  70.  horaradlocal[i]=fecharadarlocal[i].getHours()
  71.  diarad[i]=fecharadar[i].getDate()
  72.  if (diarad[i]<10){
  73.  diarad[i]='0'+diarad[i]
  74.  }
  75.  mesrad[i]=fecharadar[i].getMonth()+1
  76.  if (mesrad[i]<10){
  77.  mesrad[i]='0'+mesrad[i]
  78.  }
  79.  añorad[i]=fecharadar[i].getFullYear()
  80.  }
  81.  
  82.  
  83.  
  84.  //CARGA DE IMAGENES INICIAL
  85.  //RADAR
  86.  for (i=1;i<=24;i++){ 
  87.  anterior[i]=new Image(600,600); 
  88.  enlace[i]='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/' + añorad[i] + mesrad[i] + diarad[i] + horarad[i] + minutrad[i] + '_r8za.gif'; 
  89.  anterior[i].src = enlace[i];
  90.  }
  91.  
  92.  
  93.  
  94.  //COMIENZAN LAS FUNCIONES
  95.  
  96.  //FUNCIONES PROGRESO DE CARGA
  97.  
  98.  function progreso(){
  99.  cantidad=0
  100.  porcentaje=0
  101.  for (i=1;i<=10;i++){ 
  102.  if (anterior[i].complete){
  103.  cantidad=cantidad+1
  104.  document.getElementById("2celda"+i).style.backgrou nd="blue";
  105.  }
  106.  }
  107.  if (nodisp.complete){
  108.  cantidad=cantidad+1
  109.  }
  110.  porcentaje=Math.ceil(cantidad*100/25);
  111.  document.getElementById("cuenta").value= 'Cargando imagenes del radar: ' + porcentaje + ' %'
  112.  if (porcentaje==100) findecarga(); 
  113.  else setTimeout("progreso()", 300);
  114.  }
  115.  
  116.  function findecarga(){
  117.  document.getElementById("cuenta").value='Fin de carga de imagenes del radar'
  118.  }
  119.  
  120.  //FUNCIONES NO IMAGEN
  121.  
  122.  function noimagen(){
  123.  var s=document.form3.radares.value
  124.  document.getElementById("radarimg").src='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/r8' + mapaid[za] + '_nodisp.gif'
  125.  
  126.  }
  127.  
  128.  //FUNCIONES DE CAMBIO DE HORA
  129.  
  130.  function cambia()
  131.  {
  132.  sel=document.form1.nombre1.value;
  133.  colorfondo(sel)
  134.  cambia2(sel)
  135.  }
  136.  
  137.  
  138.  function cambia2(sel)
  139.  { 
  140.  var h=document.form1.radares.value
  141.  document.getElementById("radarimg").width=480;docu ment.getElementById("radarimg").height=530
  142.  if (h==15){document.getElementById("radarimg").width= 500;document.getElementById("radarimg").height=500 }
  143.  document.getElementById("radarimg").src=anterior[sel].src;
  144.  act=sel
  145.  document.form1.nombre1.value=sel
  146.  cuadro(act) 
  147.  }
  148.  
  149.  
  150.  //FUNCIONES PRESENTACION HORA EN UN CUADRO DE TEXTO Y ESCRIBIR LAS HORAS EN PANTALLA (C.SELECCION Y DESLIZADOR) 
  151.  
  152.  function cuadro(n) 
  153.  { 
  154.  var horalocal = horaradlocal[n]
  155.  if(horalocal<10){
  156.  horalocal='0'+horalocal
  157.  }
  158.  if(horalocal==0){
  159.  horalocal='00'
  160.  } 
  161.  if (document.form3.radares.value=="15"){minut[n]=minutradesp[n]}
  162.  else {minut[n]=minutrad[n]}
  163.  document.getElementById("hora").value= 'Radar: ' + horalocal + ':' + minut[n] 
  164.  }
  165.  
  166.  function cuadrosat(n) 
  167.  { 
  168.  var horalocal = horasat[n]
  169.  document.getElementById("horasat").value= 'Satelite: ' + horalocal + ':' + minutsat[n] 
  170.  }
  171.  
  172.  function escribe(n)
  173.  { 
  174.  var horalocal=horaradlocal[n]
  175.  if(horalocal<10){
  176.  horalocal='0'+horalocal
  177.  }
  178.  if(horalocal==0){
  179.  horalocal='00'
  180.  } 
  181.  document.write(horalocal + ':' + minutrad[n])
  182.  } 
  183.  
  184.  function escribesat(n)
  185.  {
  186.  var horalocal = horasat[n] 
  187.  document.write(horalocal + ':' + minutsat[n])
  188.  }
  189.  
  190.  //FUNCIONES CAMBIO DE COLOR DE FONDO EN DESLIZADOR
  191.  
  192.  function colorfondo(numcelda)
  193.  {
  194.  for (i=1;i<=10;i++){
  195.  document.getElementById("celda"+i).style.backgroun d="white";
  196.  }
  197.  document.getElementById("celda"+numcelda).style.ba ckground="cyan"
  198.  }
  199.  
  200.  //FUNCIONES DE ANIMACION
  201.  
  202.  var frames=10
  203.  
  204.  function animar(n)
  205.  {
  206.  var vel=300
  207.  n=n-1
  208.  t=setTimeout("animacion("+ n +")",vel) 
  209.  }
  210.  function animacion(x)
  211.  {
  212.  if(x>0){cambia2(x);animar(x);cuadro(x);colorfondo( x)}
  213.  if(x==0){cambia2(1);cuadro(x+1);x=frames;t=setTime out("animar("+x+")",1500)} 
  214.  }
  215.  
  216.  //FUNCIONES DEL DESLIZADOR
  217.  
  218.  function deslizador(x){
  219.  if (fijado==1){
  220.  colorfondo(x)
  221.  cambia2(x)
  222.  }
  223.  }
  224.  </SCRIPT>
  225.  </head>
  226.  
  227.  
  228.  <div align=center>
  229.  <td colspan="2" align='center' valign='top' ><table cellpadding="0" cellspacing="0" border ="0" align="center" width="520">
  230.  <tr height="535">
  231.  <td align="right" width="173" height="370">
  232.  <form name="form1">
  233.  <select name="radares" size="16 " onclick="radar(this.value)">
  234.  <option value=11 selected>A Coru&ntilde;a</option>
  235.  <option value=2>Almeria</option>
  236.  <option value=12>Asturias</option>
  237.  <option value=7>Baleares</option>
  238.  <option value=10>Barcelona</option>
  239.  <option value=4>Caceres</option>
  240.  <option value=14>Canarias</option>
  241.  <option value=6>Madrid</option>
  242.  <option value=0>Malaga</option>
  243.  <option value=3>Murcia</option>
  244.  <option value=8>Palencia</option>
  245.  <option value=1>Sevilla</option>
  246.  <option value=5>Valencia</option>
  247.  <option value=13>Vizcaya</option>
  248.  <option value=9>Zaragoza</option>
  249.  <option value=15 >Peninsula y Baleares</option>
  250.  </select>
  251.  </form></td>
  252.  
  253.  <td align="center" height="370" width="520"> <img id="radarimg" name="primera" border=0 src="" width="520" height="370" onError="noimagen(za)"> </td>
  254.  
  255.  
  256.  </table>
  257.  
  258.  
  259.  <p>&nbsp;</p>
  260.  <table width="398" height="70" id="selector">
  261.  <tr>
  262.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda10"onmouseover="deslizad or(10);"><script>escribe(10)</script></td>
  263.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda9"onmouseover="deslizado r(9);"><script>escribe(9)</script></td>
  264.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda8"onmouseover="deslizado r(;"><script>escribe(</script></td>
  265.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda7"onmouseover="deslizado r(7);"><script>escribe(7)</script></td>
  266.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda6"onmouseover="deslizado r(6);"><script>escribe(6)</script></td>
  267.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda5"onmouseover="deslizado r(5);"><script>escribe(5)</script></td>
  268.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda4"onmouseover="deslizado r(4);"><script>escribe(4)</script></td>
  269.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda3"onmouseover="deslizado r(3);"><script>escribe(3)</script></td>
  270.  <td width="0"align="center" bgcolor="#DDDDDD"id="celda2"onmouseover="deslizado r(2);"><script>escribe(2)</script></td>
  271.  <td width="298" align="center"bgcolor="Yellow"id="celda1" onMouseOver="deslizador(1);"><script>escribe(1)</script></td>
  272.  </tr>
  273.  </table>
  274.  <p>&nbsp;</p>
  275.  <div class="abajo">
  276.  <input type="text" id="cuenta">
  277.  <input type="text" id="hora"> 
  278.  <p align="center"><input type="text" id="cuentasat"></p>
  279.  <input type="text" id="horasat">
  280.  
  281.  <form name="form3">
  282.  <select name="radares"onchange="radar(this.value)">
  283.  <option value=0 selected></option>
  284.  </select>
  285.  </form>
  286.  
  287.  <script language=javascript>
  288.  cuadro(1)
  289.  cuadrosat(1)
  290.  cambia2(1)
  291.  cambia2sat(1)
  292.  progreso()
  293.  progresosat()
  294.  </script>
  295.  </div>
Última edición por zerokilled; 25/08/2013 a las 08:14 Razón: bbcode para codigo
  #2 (permalink)  
Antiguo 25/08/2013, 02:56
danneg
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: JavaScript complicado.
Colorea un poco el código por favor, así sería mas sencillo ayudarte :)
  #3 (permalink)  
Antiguo 25/08/2013, 05:11
 
Fecha de Ingreso: junio-2013
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: JavaScript complicado.
Cita:
Iniciado por danneg Ver Mensaje
Colorea un poco el código por favor, así sería mas sencillo ayudarte :)
Cita:
Iniciado por PIN2 Ver Mensaje
Haber si alguien me ayuda con este script, es un mapa del tiempo de provincias de España con distintos horarios, entonces lo que quiero es eliminar la opciones de elegir provincias y que el mapa funcione solo con la provincia de Zaragoza y colocar un botón de animación, es decir que pulsado dicho botón o pulsador funcione automáticamente con dichos horarios.
<SCRIPT LANGUAGE="JavaScript">

//VARIABLES

var act = 1
var i=1
var t=1
var ts=1
var pulsado=0
var pulsadosat=0
var Fecha=new Date()
var tiempoact=Fecha.getTime()
var zulu=Fecha.getTimezoneOffset()
var selec=0
var fijado=1
var fijadosat=1
var cantidad=0
var porcentaje=0
var cantidadsat=0
var porcentajesat=0

//ARRAYS

anterior=new Array()
anteriorsat=new Array()
enlace=new Array()
enlacesat=new Array()

fecharadar=new Array()
fecharadarlocal=new Array()
minutrad=new Array()
horarad=new Array()
horaradlocal=new Array()
diarad=new Array()
mesrad=new Array()
añorad=new Array()
minutradesp=new Array()
fechasat=new Array()
minut=new Array()

fechasat=new Array()
minutsat=new Array()
horasat=new Array()
diasat=new Array()
messat=new Array()
añosat=new Array()
mapaid= new Array("ml","se","am","mu","cc","va","ma","pm","vd" ,"za","ba","co","sa","ss","ca","pb")
mapasatid= new Array("sp","eu")
satid= new Array("ir","vis")

//CALCULO DE FECHAS

//RADAR


for (i=1;i<=24;i++){
tiempo=tiempoact-(10*60*1000*i)+(zulu*60*1000)
tiempolocal=tiempoact-(10*60*1000*i)
fecharadar[i]=new Date(tiempo)
fecharadarlocal[i]=new Date(tiempolocal)
minutrad[i]= fecharadar[i].getMinutes()
minutrad[i]=parseInt(minutrad[i]/10)*10 //redondea los minutos a decimas
if (minutrad[i]==0){
minutrad[i]='00'
}
horarad[i]=fecharadar[i].getHours()
if (horarad[i]<10){
horarad[i]='0'+horarad[i]
}
horaradlocal[i]=fecharadarlocal[i].getHours()
diarad[i]=fecharadar[i].getDate()
if (diarad[i]<10){
diarad[i]='0'+diarad[i]
}
mesrad[i]=fecharadar[i].getMonth()+1
if (mesrad[i]<10){
mesrad[i]='0'+mesrad[i]
}
añorad[i]=fecharadar[i].getFullYear()
}



//CARGA DE IMAGENES INICIAL
//RADAR
 for (i=1;i<=24;i++){
anterior[i]=new Image(600,600);
enlace[i]='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/' + añorad[i] + mesrad[i] + diarad[i] + horarad[i] + minutrad[i] + '_r8za.gif';
anterior[i].src = enlace[i];
}



//COMIENZAN LAS FUNCIONES

//FUNCIONES PROGRESO DE CARGA

function progreso(){
cantidad=0
porcentaje=0
for (i=1;i<=10;i++){
if (anterior[i].complete){
cantidad=cantidad+1
document.getElementById("2celda"+i).style.backgrou nd="blue";
}
}
if (nodisp.complete){
cantidad=cantidad+1
}
porcentaje=Math.ceil(cantidad*100/25);
document.getElementById("cuenta").value= 'Cargando imagenes del radar: ' + porcentaje + ' %'
if (porcentaje==100) findecarga();
else setTimeout("progreso()", 300);
}

function findecarga(){
document.getElementById("cuenta").value='Fin de carga de imagenes del radar'
}

//FUNCIONES NO IMAGEN

function noimagen(){
var s=document.form3.radares.value
document.getElementById("radarimg").src='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/r8' + mapaid[za] + '_nodisp.gif'

}

//FUNCIONES DE CAMBIO DE HORA

function cambia()
{
sel=document.form1.nombre1.value;
colorfondo(sel)
cambia2(sel)
}


function cambia2(sel)
{
var h=document.form1.radares.value
document.getElementById("radarimg").width=480;docu ment.getElementById("radarimg").height=530
if (h==15){document.getElementById("radarimg").width= 500;document.getElementById("radarimg").height=500 }
document.getElementById("radarimg").src=anterior[sel].src;
act=sel
document.form1.nombre1.value=sel
cuadro(act)
}


//FUNCIONES PRESENTACION HORA EN UN CUADRO DE TEXTO Y ESCRIBIR LAS HORAS EN PANTALLA (C.SELECCION Y DESLIZADOR)

function cuadro(n)
{
var horalocal = horaradlocal[n]
if(horalocal<10){
horalocal='0'+horalocal
}
if(horalocal==0){
horalocal='00'
}
if (document.form3.radares.value=="15"){minut[n]=minutradesp[n]}
else {minut[n]=minutrad[n]}
document.getElementById("hora").value= 'Radar: ' + horalocal + ':' + minut[n]
}

function cuadrosat(n)
{
var horalocal = horasat[n]
document.getElementById("horasat").value= 'Satelite: ' + horalocal + ':' + minutsat[n]
}

function escribe(n)
{
var horalocal=horaradlocal[n]
if(horalocal<10){
horalocal='0'+horalocal
}
if(horalocal==0){
horalocal='00'
}
document.write(horalocal + ':' + minutrad[n])
}

function escribesat(n)
{
var horalocal = horasat[n]
document.write(horalocal + ':' + minutsat[n])
}

//FUNCIONES CAMBIO DE COLOR DE FONDO EN DESLIZADOR

function colorfondo(numcelda)
{
for (i=1;i<=10;i++){
document.getElementById("celda"+i).style.backgroun d="white";
}
document.getElementById("celda"+numcelda).style.ba ckground="cyan"
}

//FUNCIONES DE ANIMACION

var frames=10

function animar(n)
{
var vel=300
n=n-1
t=setTimeout("animacion("+ n +")",vel)
}
function animacion(x)
{
if(x>0){cambia2(x);animar(x);cuadro(x);colorfondo( x)}
if(x==0){cambia2(1);cuadro(x+1);x=frames;t=setTime out("animar("+x+")",1500)}
}

//FUNCIONES DEL DESLIZADOR

function deslizador(x){
if (fijado==1){
colorfondo(x)
cambia2(x)
}
}
</SCRIPT>
</head>


<div align=center>
<td colspan="2" align='center' valign='top' ><table cellpadding="0" cellspacing="0" border ="0" align="center" width="520">
 <tr height="535">
<td align="right" width="173" height="370">
<form name="form1">
<select name="radares" size="16 " onclick="radar(this.value)">
<option value=11 selected>A Coru&ntilde;a</option>
<option value=2>Almeria</option>
<option value=12>Asturias</option>
<option value=7>Baleares</option>
<option value=10>Barcelona</option>
<option value=4>Caceres</option>
<option value=14>Canarias</option>
<option value=6>Madrid</option>
<option value=0>Malaga</option>
<option value=3>Murcia</option>
<option value=8>Palencia</option>
<option value=1>Sevilla</option>
<option value=5>Valencia</option>
<option value=13>Vizcaya</option>
<option value=9>Zaragoza</option>
<option value=15 >Peninsula y Baleares</option>
</select>
</form></td>

<td align="center" height="370" width="520"> <img id="radarimg" name="primera" border=0 src="" width="520" height="370" onError="noimagen(za)"> </td>


</table>


<p>&nbsp;</p>
<table width="398" height="70" id="selector">
<tr>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda10"onmouseover="deslizad or(10);"><script>escribe(10)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda9"onmouseover="deslizado r(9);"><script>escribe(9)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda8"onmouseover="deslizado r(;"><script>escribe(</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda7"onmouseover="deslizado r(7);"><script>escribe(7)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda6"onmouseover="deslizado r(6);"><script>escribe(6)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda5"onmouseover="deslizado r(5);"><script>escribe(5)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda4"onmouseover="deslizado r(4);"><script>escribe(4)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda3"onmouseover="deslizado r(3);"><script>escribe(3)</script></td>
<td width="0"align="center" bgcolor="#DDDDDD"id="celda2"onmouseover="deslizado r(2);"><script>escribe(2)</script></td>
<td width="298" align="center"bgcolor="Yellow"id="celda1" onMouseOver="deslizador(1);"><script>escribe(1)</script></td>
</tr>
</table>
<p>&nbsp;</p>
<div class="abajo">
<input type="text" id="cuenta">
<input type="text" id="hora">
<p align="center"><input type="text" id="cuentasat"></p>
<input type="text" id="horasat">

<form name="form3">
<select name="radares"onchange="radar(this.value)">
<option value=0 selected></option>
</select>
</form>

<script language=javascript>
cuadro(1)
cuadrosat(1)
cambia2(1)
cambia2sat(1)
progreso()
progresosat()
</script>
 </div>
  #4 (permalink)  
Antiguo 25/08/2013, 06:12
danneg
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: JavaScript complicado.
LoL ...

Me refería a usar las etiquetas [ HIGHLIGHT ][ /HIGHLIGHT ] para dar formato a tu código ... jejeje, le daré una leída :)
  #5 (permalink)  
Antiguo 25/08/2013, 09:21
 
Fecha de Ingreso: junio-2013
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: JavaScript complicado.
Vale, perdona no te había entendido, gracias por ayudarme.
  #6 (permalink)  
Antiguo 26/08/2013, 10:35
 
Fecha de Ingreso: junio-2013
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: JavaScript complicado.
Lo que quiero eliminar y que funcione sin esto


y colocar el Animar Radar y Stop, que funcione la imagen cuando se pulse el Animar Radar
Última edición por PIN2; 26/08/2013 a las 13:01

Etiquetas: funcion, input, select, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:43.