Tema: JavaScript complicado.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/08/2013, 10:03
PIN2
 
Fecha de Ingreso: junio-2013
Mensajes: 18
Antigüedad: 10 años, 11 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