I'm Sorry... Sajnálom...

A "delphi program" nem tölthető le!
(átmeneti oldal hiba)

Bezár

I'm Sorry... Sajnálom...

A "css ötlet" nem tölthető le!
(átmeneti oldal hiba)

Bezár

I'm Sorry... Sajnálom...

A "php ötlet" nem tölthető le!
(átmeneti oldal hiba)

Bezár

Információk


Honlap infók:
Adatok
2006. 05. 21-től

Összes látogatás:

Mai látogatás:

Összes látogató:

Mai látogató:

Aktuális látogató:

Üdvözöllek!
(54.145.124.143)
Oldal módosítva:
2012. 10. 17. 12:07.
Buzsák





Speed teszt
(Aktuális letöltési sebesség mérés)

Ez az ismertető egy internetes letöltési sebességet mérő program egyszerűsített leírását és forráskódját tartalmazza. A működéséhez szükséges "JS", továbbá "PHP" és egy kis "CSS" ismeret.
Az ismertető elolvasása előtt a működőképes SPEED TESZT demo-t előbb tekintsd meg!
Szabványosság tekintetében megfelel az "XHTML 1.0 Strict" elvárásainak. (ráadásul CSS-valid is...)


"speedtest.php"

A fájl, még a HTML fejléc előtt néhány sor PHP-kóddal kezdődik. Az  options  függvény a  <SELECT>  elem helyes működését hivatott bíztosítani és csak érdekességként íme a forráskódja:

««  options függvény  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <?php
  2. header('Content-type: text/html; charset=utf-8');
  3. function options($options, $selected = null, $labelIsValue = false)
  4. { $html = "";
  5.   settype($selected, "array");
  6.   settype($options, "array");
  7.   foreach ($options as $value=>$label)
  8.   { if (is_array($label))
  9.     { $value = $label[0];
  10.       $label = $label[1]; }
  11.     $value = $labelIsValue ? $label : $value;
  12.     $html .= '<option value="'.$value.'"';
  13.     if (in_array($value, $selected))
  14.     { $html .= ' selected="selected"'; }
  15.     $html .= ">".$label."</option>";
  16.   }
  17.   if (!$html)
  18.   { $html .= '<option value="0">---</option>'; }
  19.   return $html;
  20. }
  21. if(!isset($_REQUEST["skalamax"])) $_REQUEST["skalamax"] = 2;
  22. ?>
  23.  

(A fenti forráskód utolsó sora a "Skála maximum" kezdő értékét hivatott beállítani.)

A  <HEAD>  rész a szokásos módon épül fel. Itt hívom meg a később ismertetésre kerülő "speedtest.css" és "speedtest.js" fájlt is. A két fájl a kijelzések formázását és a mérési adatok beállítását, lekérését, kiírását, frissítését végző eljárásokat tartalmazza. Továbbá itt helyeztem el az automatikus ismétlődést biztosító JS-függvényt is.

««  HTML fejléc  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="en">
  3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.   <meta http-equiv="Content-Language" content="hu" />
  5.   <meta name="robots" content="all" />
  6.   <meta name="author" content="Szabó Ferenc" />
  7.   <meta name="copyright" content="Family Team" />
  8.   <meta http-equiv="Cache-Control" content="no-cache" />
  9.   <meta http-equiv="Pragma" content="no-cache" />
  10.   <meta http-equiv="Expires" content="0" />
  11.   <title>(FT) Sebességteszt</title>
  12.   <link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" />    
  13.   <link rel="stylesheet" type="text/css" href="speedtest.css" media="screen" />
  14.   <!-- sebesség-mérés, kijelzés vezérlés -->
  15.   <script type="text/javascript" src="js/speedtest.js"></script>
  16.   <!-- teszt ciklikus meghívása -->
  17.   <script type="text/javascript">
  18.     //<![CDATA[
  19.    function ismetel()
  20.    { if (document.form1.engedely.checked == true)
  21.      { setTimeout("document.form1.submit()",300000);}
  22.      setTimeout("ismetel()",300000);}
  23.    //]]>
  24.   </script>
  25. </head>
  26.  

(A fenti forráskód utolsó soraiban található a ciklikus mérést bíztosító JS függvény.)

A  <BODY>  rész elején az oldal jobb felső sarkában megjelenő óra megjelenítéséhez szükséges sorok vannak, melynek leírása nem ennek az ismertetőnek a része.
A továbbiakban viszont már a sebességteszt  mérés beállítás, mérés indítás  lehetőségét megvalósító HTML és PHP kódsorok következnek. Kijelzési maximumként öt különböző érték választható, valamint a ciklikus mérés is bejelölhető. A beállított értékek minden új méréskor megmaradnak, csak az oldal frissítése esetén állnak alaphelyzetbe.
(A kijelzett értékek is csak frissítéskor törlődnek, így előtte a böngésző "Oldal mentése" menüpontjával egy adott állapot lementhető).
A fentieket megvalósító konkrét forráskód itt tekinthető meg, tölthető le:

««  mérés beállítás, mérés indítás  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <form method="post" action="javascript:UjMeres();" name="form1" enctype="multipart/form-data">
  2.   <label id="skala">Skála maximum:</label>&nbsp;
  3.   <select id="skalamax" name="skalamax" onchange="window.location.reload();">
  4.     <?php
  5.       $nums = ($_REQUEST["skalamax"]) ? intval($_REQUEST["skalamax"]) : 2;
  6.       echo options(array(0 => "30000", 1 => "20000", 2 => "10000", 3 => "5000", 4 => "3000"), $nums);
  7.     ?>
  8.   </select>&nbsp;&nbsp;
  9.   <label id="automat">Automatikus mérés:</label>&nbsp;
  10.   <input type="checkbox" name="engedely" id="engedely" value="engedely"
  11.          title="<?php echo 'Az indítás után a mérés 5 percenként ismétlődik'; ?>"
  12.          <?php if(isset($_REQUEST['engedely'])) {echo 'checked="checked"';} ?> />
  13.   <br /><br />
  14.   <input id="formaz" name="formaz" type="submit" value="&nbsp;Új&nbsp;Mérés&nbsp;Indítás&nbsp;" />
  15.   <input type="hidden" name="post" />
  16. </form>
  17. <!-- teszt ciklikus meghívása -->
  18. <script type="text/javascript">
  19.   //<![CDATA[
  20.   setTimeout("ismetel()",1);
  21.   //]]>
  22. </script>
  23.  

(A fenti forráskód utolsó soraiban történik a ciklikus mérést bíztosító JS függvény meghívása.)

Mivel a mért adatokat háromféleképpen is meg kívántam jeleníteni, egy kissé bonyolultra sikeredett a megoldás. Egy táblázatos szerkezetben számszerű adatokkal és egy "hőmérő-szerű" kijelzőn is megjelenik a legutolsó mérés. Sőt az oldal alján egy DIV-es szerkezetben a ciklikus mérések egymás után, egy-egy függőleges sávként is megjelennek. Mindegyik esetben az alaphelyzet HTML és CSS segítségével kerül beállításra, az aktuális adatok megjelenítése viszont JS segítségével történik. Először nézzük az alapot, azaz a  kijelzés HTML  kódját:

««  kijelzés HTML szerkezete  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1.     <table class="tablekulso" summary="" cellspacing="0" cellpadding="3">
  2.      <tr>
  3.       <td class="tdkulso_t_b" colspan="3">
  4.        <span>&nbsp;A mért adatok tájékoztató jellegűek!</span>
  5.       </td>
  6.      </tr>
  7.      <tr>
  8.       <td class="tdkulso_l_r">&nbsp;</td>
  9.       <td class="tdkulso_c">
  10.        <table class="tablebelso" summary="">
  11.         <tr>
  12.          <td class="tdbelso_lt">
  13.           <div class="divbelso_lt">
  14.            <p class="pbelso_lt">
  15.             Az Ön sebessége:
  16.             <br /><br />
  17.             <span id="sebeskbitsec">Kbits/sec</span>
  18.             <br />
  19.             <span id="sebesmbitsec">(Mbits/sec)</span>
  20.            </p>
  21.           </div>
  22.          </td>
  23.          <td rowspan="2">
  24.           <table class="tablekijelzo" summary="" cellspacing="0" cellpadding="0">
  25.            <tr>
  26.             <td class="tdkijelzo_t">
  27.              <p class="pkijelzo_t">Sebességteszt</p>
  28.             </td>
  29.            </tr>
  30.            <tr>
  31.             <td>
  32.              <div class="divkijelzo_c">
  33.               <div class="bal">30Mbps</div>
  34.               <div class="kozepb">&nbsp;</div>
  35.               <div class="kozepk"><div id="sav1">&nbsp;</div></div>
  36.               <div class="kozepj">&nbsp;</div>
  37.               <div class="jobb">VDSL2</div>
  38.  
  39.               <div class="bal">20Mbps</div>
  40.               <div class="kozepb">&nbsp;</div>
  41.               <div class="kozepk"><div id="sav2">&nbsp;</div></div>
  42.               <div class="kozepj">&nbsp;</div>
  43.               <div class="jobb">ADSL2+</div>
  44.  
  45.               <div class="bal">16Mbps</div>
  46.               <div class="kozepb">&nbsp;</div>
  47.               <div class="kozepk"><div id="sav3">&nbsp;</div></div>
  48.               <div class="kozepj">&nbsp;</div>
  49.               <div class="jobb">ADSL2</div>
  50.  
  51.               <div class="bal">10Mbps</div>
  52.               <div class="kozepb">&nbsp;</div>
  53.               <div class="kozepk"><div id="sav4">&nbsp;</div></div>
  54.               <div class="kozepj">&nbsp;</div>
  55.               <div class="jobb">ADSL</div>
  56.  
  57.               <div class="bal">8Mbps</div>
  58.               <div class="kozepb">&nbsp;</div>
  59.               <div class="kozepk"><div id="sav5">&nbsp;</div></div>
  60.               <div class="kozepj">&nbsp;</div>
  61.               <div class="jobb">xDSL</div>
  62.  
  63.               <div class="bal">4Mbps</div>
  64.               <div class="kozepb">&nbsp;</div>
  65.               <div class="kozepk"><div id="sav6">&nbsp;</div></div>
  66.               <div class="kozepj">&nbsp;</div>
  67.               <div class="jobb">xDSL</div>
  68.  
  69.               <div class="bal">2Mbps</div>
  70.               <div class="kozepb">&nbsp;</div>
  71.               <div class="kozepk"><div id="sav7">&nbsp;</div></div>
  72.               <div class="kozepj">&nbsp;</div>
  73.               <div class="jobb">xDSL</div>
  74.  
  75.               <div class="bal">1.544Mbps</div>
  76.               <div class="kozepb">&nbsp;</div>
  77.               <div class="kozepk"><div id="sav8">&nbsp;</div></div>
  78.               <div class="kozepj">&nbsp;</div>
  79.               <div class="jobb">xDSL</div>
  80.  
  81.               <div class="bal">1Mbps</div>
  82.               <div class="kozepb">&nbsp;</div>
  83.               <div class="kozepk"><div id="sav9">&nbsp;</div></div>
  84.               <div class="kozepj">&nbsp;</div>
  85.               <div class="jobb">xDSL</div>
  86.  
  87.               <div class="bal">896Kbps</div>
  88.               <div class="kozepb">&nbsp;</div>
  89.               <div class="kozepk"><div id="sav10">&nbsp;</div></div>
  90.               <div class="kozepj">&nbsp;</div>
  91.               <div class="jobb">xDSL</div>
  92.  
  93.               <div class="bal">768Kbps</div>
  94.               <div class="kozepb">&nbsp;</div>
  95.               <div class="kozepk"><div id="sav11">&nbsp;</div></div>
  96.               <div class="kozepj">&nbsp;</div>
  97.               <div class="jobb">xDSL</div>
  98.  
  99.               <div class="bal">640Kbps</div>
  100.               <div class="kozepb">&nbsp;</div>
  101.               <div class="kozepk"><div id="sav12">&nbsp;</div></div>
  102.               <div class="kozepj">&nbsp;</div>
  103.               <div class="jobb">xDSL</div>
  104.  
  105.               <div class="bal">512Kbps</div>
  106.               <div class="kozepb">&nbsp;</div>
  107.               <div class="kozepk"><div id="sav13">&nbsp;</div></div>
  108.               <div class="kozepj">&nbsp;</div>
  109.               <div class="jobb">xDSL</div>
  110.  
  111.               <div class="bal">384Kbps</div>
  112.               <div class="kozepb">&nbsp;</div>
  113.               <div class="kozepk"><div id="sav14">&nbsp;</div></div>
  114.               <div class="kozepj">&nbsp;</div>
  115.               <div class="jobb">xDSL&nbsp;</div>
  116.  
  117.               <div class="bal">256Kbps</div>
  118.               <div class="kozepb">&nbsp;</div>
  119.               <div class="kozepk"><div id="sav15">&nbsp;</div></div>
  120.               <div class="kozepj">&nbsp;</div>
  121.               <div class="jobb">xDSL&nbsp;</div>
  122.  
  123.               <div class="bal">128Kbps</div>
  124.               <div class="kozepb">&nbsp;</div>
  125.               <div class="kozepk"><div id="sav16">&nbsp;</div></div>
  126.               <div class="kozepj">&nbsp;</div>
  127.               <div class="jobb">ISDN</div>
  128.  
  129.               <div class="bal">64Kbps</div>
  130.               <div class="kozepb">&nbsp;</div>
  131.               <div class="kozepk"><div id="sav17">&nbsp;</div></div>
  132.               <div class="kozepj">&nbsp;</div>
  133.               <div class="jobb">ISDN</div>
  134.  
  135.               <div class="bal">56Kbps</div>
  136.               <div class="kozepb">&nbsp;</div>
  137.               <div class="kozepk"><div id="sav18">&nbsp;</div></div>
  138.               <div class="kozepj">&nbsp;</div>
  139.               <div class="jobb">x2/k-flex</div>
  140.  
  141.               <div class="bal">28.8Kbps</div>
  142.               <div class="kozepb">&nbsp;</div>
  143.               <div class="kozepk"><div id="sav19">&nbsp;</div></div>
  144.               <div class="kozepj">&nbsp;</div>
  145.               <div class="jobb">&nbsp;</div>
  146.  
  147.               <div class="bal">14.4Kbps</div>
  148.               <div class="kozepb">&nbsp;</div>
  149.               <div class="kozepk"><div id="sav20">&nbsp;</div></div>
  150.               <div class="kozepj">&nbsp;</div>
  151.               <div class="jobb">&nbsp;</div>
  152.  
  153.               <div class="bal">9.6Kbps</div>
  154.               <div class="kozepb">&nbsp;</div>
  155.               <div class="kozepk"><div id="sav21">&nbsp;</div></div>
  156.               <div class="kozepj">&nbsp;</div>
  157.               <div class="jobb">&nbsp;</div>
  158.  
  159.               <div class="bal">4.8Kbps</div>
  160.               <div class="kozepb">&nbsp;</div>
  161.               <div class="kozepk"><div id="sav22">&nbsp;</div></div>
  162.               <div class="kozepj">&nbsp;</div>
  163.               <div class="jobb">&nbsp;</div>
  164.  
  165.               <div class="tartaly_l">&nbsp;</div>
  166.               <div class="tartaly_c">&nbsp;</div>
  167.               <div class="tartaly_r">&nbsp;</div>
  168.               <br class="clear"/>
  169.              </div>
  170.             </td>
  171.            </tr>
  172.            <tr>
  173.             <td class="tdkijelzo_b">
  174.              <p class="pkijelzo_b" id="varakoz">
  175.               <img class="imgkijelzo_b" src="images/progress.gif" alt="" />
  176.              </p>
  177.             </td>
  178.            </tr>
  179.           </table>  
  180.          </td>
  181.         </tr>
  182.         <!-- adat-kiírások -->
  183.         <tr bgcolor=#e1dbd3>
  184.          <td width="360" align="center">
  185.           <div style="width:320px; text-align:left;">
  186.            <p style="width:200px; color:#323227; font-weight:bold;">Idők:</p>
  187.             <ul style="color:#4f5974;font-size:12px;">
  188.               <li id="millitime">Letöltés ideje (msec):</li>
  189.               <li id="downloadtime">Letöltés ideje (sec):</li>
  190.               <li id="startsec">Kezdet (h:m:s):</li>
  191.               <li id="stopsec">Vég (h:m:s):</li>
  192.             </ul>
  193.            <p style="width:200px; color:#323227; font-weight: bold;">Adatok:</p>
  194.             <ul style="color:#4f5974;font-size:12px;">
  195.               <li id="bits">Letöltött méret (bits):</li>
  196.               <li id="bytes">Letöltött méret (bytes):</li>
  197.               <li id="kbytes">Letöltött méret (Kbytes):</li>
  198.               <li id="mbytes">Letöltött méret (Mbytes):</li>
  199.               <li id="spdbitsec">Sebesség (bits/sec):</li>
  200.               <li id="kbits_s">Sebesség (Kbits/sec):</li>
  201.               <li id="mbits_s">Sebesség (Mbits/sec):</li>
  202.               <li id="spdbytesec">Sebesség (bytes/sec):</li>
  203.               <li id="spdkbytesec">Sebesség (Kbytes/sec):</li>
  204.               <li id="mbytes_sec">Sebesség (Mbytes/sec):</li>
  205.             </ul>
  206.           </div>
  207.          </td>
  208.         </tr>
  209.        </table>
  210.       </td>
  211.       <td class="tdkulso_l_r">&nbsp;</td>
  212.      </tr>
  213.      <tr>
  214.       <td class="tdkulso_t_b" colspan="3">
  215.        <span>&nbsp;A mért adatok tájékoztató jellegűek!</span>
  216.       </td>
  217.      </tr>
  218.     </table>
  219.     <div class="divbelso_lt">
  220.       <p class="pbelso_lt">
  221.         Automatikus mérésvonalak 5 percenként, cimke: "időpont" és "Kbits/sec"
  222.  
  223.       </p>
  224.       <div class="rajzol" id="rajzol">
  225.         <div class="szunet"></div>
  226.       </div>
  227.     </div>
  228.  

(Remélem, hogy egy szerkesztőben megtekintve, - kijelölés/másolás/beillesztés - után áttekinthető lesz a kód...)




"speedtest.css"

A fájl a teljes formázást tartalmazza, azonban itt csak a "Speed teszt"  kijelzés formázás  részét mutatom be, mivel a teljes CSS-fájl bármikor lementhető a "DEMO" oldal letöltésével együtt. Magáról a CSS-kódról sokat mondani úgy sem lehet, mert az a HTML-kóddal együtt önmagáért beszél. Ime a "letisztított" fájl tartalma:

««  kijelzés formázás  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. /* kijelző táblázat-szerkezet formázás */
  2. .tablekulso{margin:0 auto; border:2px outset #C7C7B6; color:#323227; font-size:14px;}
  3. .tdkulso_t_b{background-color:#515140; height:20px; color:#FFFFFF; text-align:center;}
  4. .tdkulso_l_r{background-color:#515140; width:20px;}
  5. .tdkulso_c{background-color:#D9D9CE;}
  6. .tablebelso{border:2px inset #515140;}
  7. .tdbelso_lt{background-color:#e1dbd3; height:130px;}
  8. .divbelso_lt{margin:0 auto; padding:0; text-align:center;}
  9. .pbelso_lt{margin:0; padding:20px; color:#323227; font-size:14px; font-weight:700;}
  10. .tablekijelzo{border:2px outset #515140; height:450px; width:250px; margin:0; background-color:#C7C7B6; color:#323227; font-size:8px;}
  11. .tdkijelzo_t{height:34px; margin:auto auto; background-color:#C7C7B6;}
  12. .pkijelzo_t{margin:auto auto; text-align:center; background-color:#C7C7B6; color:#323227; font-size:14px; font-weight:700;}
  13. .divkijelzo_c{background-color:#C7C7B6; width:230px; height:340px; margin:0 auto; padding:0; font-size:10px;}
  14. .bal{background-color:#C7C7B6; width:95px; height:15px; margin:0; padding:0; padding-right:5px; text-align:right; float:left;}
  15. .kozepb{background:transparent url('../images/vonalb.gif') no-repeat 0 0; width:10px; height:15px; margin:0; padding:0; text-align:center; float:left; font-weight:700;}
  16. .kozepk{background-color:#FFFFFF; width:10px; height:15px; margin:0; padding:0; text-align:center; float:left; font-weight:700;}
  17. .kozepj{background:transparent url('../images/vonalj.gif') no-repeat 0 0; width:10px; height:15px; margin:0; padding:0; text-align:center; float:left; font-weight:700;}
  18. .jobb{background-color:#C7C7B6; width:95px; height:15px; margin:0; padding:0; padding-left:5px; text-align:left; float:left;}
  19. .tartaly_l{background-color:#C7C7B6; width:95px; height:40px; margin:0; padding:0; padding-right:5px; text-align:right; float:left;}
  20. .tartaly_c{background:#C7C7B6 url('../images/gyujto.gif') no-repeat 0 0; width:30px; height:40px; margin:0; padding:0; text-align:center; font-weight:700; float:left;}
  21. .tartaly_r{background-color:#C7C7B6; width:95px; height:40px; margin:0; padding:0; padding-left:5px; text-align:left; float:left;}
  22. #sav1, #sav2, #sav3, #sav4, #sav5, #sav6, #sav7, #sav8, #sav9, #sav10, #sav11, #sav12, #sav13, #sav14, #sav15, #sav16, #sav17, #sav18, #sav19, #sav20, #sav21, #sav22{width:10px; height:15px; margin:0; padding:0; background:transparent url('../images/savkozepz.gif') no-repeat 0 0; text-align:center; font-weight:700; z-index:100; display:block;}
  23. .tdkijelzo_b{height:34px; margin:auto auto; background-color:#C7C7B6;}
  24. .pkijelzo_b{height:14px; margin:auto auto; background-color:#C7C7B6; color:#323227; font-size:12px; font-weight:700;}
  25. .imgkijelzo_b{width:140px; height:14px; display:none;}
  26. .clear {clear:both; height:0; line-height:0; overflow:hidden;}
  27. /* adatbeállító elemek formázása */
  28. select{width:115px; background-color:#515140; color:#ffffff;}
  29. label#bekezd{height:35px; width:136px; font-weight:700; font-size:14px;}    
  30. label#automat{font-weight:700; font-size:14px;}
  31. label#skala{font-weight:700; font-size:14px;}
  32. input#formaz{height:32px; width:160px; font-weight:700; font-size:14px;}
  33. /* adatfogadó IFRAME elrejtése */
  34. #content{display:none;}
  35. /* ciklikus kijelző formázása */
  36. .rajzol{margin:0 auto; padding:3px; width:680px; height:auto; overflow:hidden; border:1px solid #515140;}
  37. .elem{float:left; margin:3px 0; padding:0; width:4px; border-style:none; border-top:2px solid #515140; background-color:#515140;}
  38. .szunet{float:left; margin:3px 0; padding:0; width:4px; height:198px; border-style:none; border-top:2px solid #515140; background-color:transparent;}
  39.  

(A CSS elkészítése közben nem a dizájnos külső, hanem a mért adatok pontos láthatósága volt a célom...)



"speedtest.js"

A fájl a "kijelzés vezérlés" egészét tartalmazza, melyet összesen három eljárás testesít meg. Az első kettő az  UjMeres() és letolt_fajl(melyik) függvények . Az első először megjelenít a letöltődés idejére egy jelzést, majd meghívja a másodikat '1' bemenő paraméterrel. A második pedig még kétszer önmagát, majd az AdatLekeres() függvényt. A folyamat során eltérő nevü, de azonos szerkezetü fájlok töltődnek be egy rejtett IFRAME-be(a letöltődő képek mérete változó) adatok lekérdezésével párhuzamosan.

««  UjMeres() és letolt_fajl(melyik) függvények »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. /* "Új Mérés Indítás gomb"-bal indított eljárás */
  2. function letolt_fajl(melyik)
  3. {
  4.   var bongeszo_neve = navigator.appName;
  5.   //előző fájl méretek és stop idők lekérdezése
  6.   if(melyik == '2')
  7.   {
  8.     if (bongeszo_neve == "Microsoft Internet Explorer")
  9.     { meretke1 = window.frames['ablak'].meret; }
  10.     else
  11.     { var x=document.getElementById("ablak").contentDocument; meretke1 = (x.getElementsByTagName("div")[0].childNodes[1].nodeValue); }
  12.     var stopidoke = new Date();
  13.     stopsece1 = stopidoke.getTime();
  14.   }
  15.   if(melyik == '3')
  16.   {
  17.     if (bongeszo_neve == "Microsoft Internet Explorer")
  18.     { meretke2 = window.frames['ablak'].meret; }
  19.     else
  20.     { var x=document.getElementById("ablak").contentDocument; meretke2 = (x.getElementsByTagName("div")[0].childNodes[1].nodeValue); }
  21.     var stopidoke = new Date();
  22.     stopsece2 = stopidoke.getTime();
  23.   }
  24.   if(melyik == '4')
  25.   {
  26.     if (bongeszo_neve == "Microsoft Internet Explorer")
  27.     { meretke3 = window.frames['ablak'].meret; }
  28.     else
  29.     { var x=document.getElementById("ablak").contentDocument; meretke3 = (x.getElementsByTagName("div")[0].childNodes[1].nodeValue); }
  30.     var stopidoke = new Date();
  31.     stopsece3 = stopidoke.getTime();
  32.   }
  33.   //IFRAME frissítés
  34.   var szuloke = document.getElementById('content');
  35.   var regiablak = document.getElementById('content1');
  36.   if (regiablak)  //a meglévő keret/iframe és tartalom törlése
  37.   { regiablak.innerHTML = ''; regiablak.style.visibility = 'hidden'; regiablak.parentNode.removeChild(regiablak); }
  38.   //új keret/iframe és tartalom létrehozása
  39.   var ujablak=document.createElement('DIV');
  40.   ujablak.id = 'content1';
  41.   ujablak.style.visibility = 'visible';
  42.   szuloke.appendChild(ujablak);
  43.   //aktuális START-időbélyegegek, aktuális fájlok, aktuális HÍVÁSOK
  44.   if(melyik == '1')
  45.   {
  46.     var startidok = new Date();
  47.     startsece1 = startidok.getTime();
  48.     betoltfile = "meret/1024kb.php";
  49.     betoltfile += '?valami='+(new Date()).getTime();
  50.     ujablak.innerHTML='<iframe name="ablak" id="ablak" src="'+betoltfile+
  51.                       '" style="border:1px solid brown;margin:0;padding:0;width:120px;height:38px;"'+
  52.                       ' onload="javascript:letolt_fajl(\'2\');" ><\/iframe>';
  53.   }
  54.   if(melyik == '2')
  55.   {
  56.     var startidok = new Date();
  57.     startsece2 = startidok.getTime();
  58.     betoltfile = "meret/512kb.php";
  59.     betoltfile += '?valami='+(new Date()).getTime();
  60.     ujablak.innerHTML='<iframe name="ablak" id="ablak" src="'+betoltfile+
  61.                       '" style="border:1px solid brown;margin:0;padding:0;width:120px;height:38px;"'+
  62.                       ' onload="javascript:letolt_fajl(\'3\');" ><\/iframe>';
  63.   }
  64.   if(melyik == '3')
  65.   {
  66.     var startidok = new Date();
  67.     startsece3 = startidok.getTime();
  68.     betoltfile = "meret/256kb.php";
  69.     betoltfile += '?valami='+(new Date()).getTime();
  70.     ujablak.innerHTML='<iframe name="ablak" id="ablak" src="'+betoltfile+
  71.                       '" style="border:1px solid brown;margin:0;padding:0;width:120px;height:38px;"'+
  72.                       ' onload="javascript:letolt_fajl(\'4\');" ><\/iframe>';
  73.   }
  74.   if(melyik == '4')
  75.   {
  76.     var startidok = new Date();
  77.     startsece4 = startidok.getTime();
  78.     betoltfile = "meret/128kb.php";
  79.     betoltfile += '?valami='+(new Date()).getTime();
  80.     ujablak.innerHTML='<iframe name="ablak" id="ablak" src="'+betoltfile+
  81.                       '" style="border:1px solid brown;margin:0;padding:0;width:120px;height:38px;"'+
  82.                       ' onload="javascript:AdatLekeres();" ><\/iframe>';
  83.   }
  84. }
  85. function UjMeres()
  86. { //várakozás-jelzés megjelenítés
  87.   document.getElementById("varakoz").innerHTML = '<img src="images/progress.gif" width="140" height="14" alt="" style="margin:auto auto;display:block;" \/>';
  88.   letolt_fajl('1');
  89. }
  90.  

(Az utolsó hívás már az "AdatLekeres" eljárás...)


Az  AdatLekeres() függvény . Itt először elrejtésre kerül a letöltődés idején látható jelzés, majd befejeződik az adatlekérés. Következő lépésként ezen adatokból kiszámolásra kerülnek a kiíráshoz/kijelzéshez szükséges paraméterek. Legvégül megfelelő szűrés, formázás után kerül sor a három féle kijelzés módosítására a HTML-tartalomban.

««  AdatLekeres() függvény  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. // JavaScript Document
  2. var betoltfile = "";
  3. var meretke1 = '';
  4. var meretke2 = '';
  5. var meretke3 = '';
  6. var meretke4 = '';
  7. var startsece1 = 0;
  8. var startsece2 = 0;
  9. var startsece3 = 0;
  10. var startsece4 = 0;
  11. var stopsece1 = 0;
  12. var stopsece2 = 0;
  13. var stopsece3 = 0;
  14. var stopsece4 = 0;
  15. function AdatLekeres()
  16. {
  17.   document.getElementById("varakoz").innerHTML = '<img src="images/progress.gif" width="140" height="14" alt="" style="margin:auto auto;visibility:hidden;" \/>';
  18.   //utolsó STOPT-időbélyeg
  19.   var stopidok = new Date();
  20.   stopsece4 = stopidok.getTime();
  21.   bongeszo_neve = navigator.appName;
  22.   //várakozás-jelzés elrejtés
  23.   document.getElementById("varakoz").innerHTML = '<img src="images/progress.gif" width="140" height="14" alt="" style="display:none;" \/>';
  24.   //fájl méret lekérdezése
  25.   if (bongeszo_neve == "Microsoft Internet Explorer")
  26.   { meretke4 = window.frames['ablak'].meret; }
  27.   else
  28.   { var x=document.getElementById("ablak").contentDocument; meretke4 = (x.getElementsByTagName("div")[0].childNodes[1].nodeValue); }
  29.   //IDŐBÉLYEGEK aktualizálása
  30.   var millitime1 = (stopsece1 - startsece1);
  31.   var millitime2 = (stopsece2 - startsece2);
  32.   var millitime3 = (stopsece3 - startsece3);
  33.   var millitime4 = (stopsece4 - startsece4);
  34.   var bytes1     = Math.round(parseInt(meretke1));
  35.   var bytes2     = Math.round(parseInt(meretke2));
  36.   var bytes3     = Math.round(parseInt(meretke3));
  37.   var bytes4     = Math.round(parseInt(meretke4));
  38.   var millitime  = millitime1+millitime2+millitime3+millitime4;
  39.   var bytes      = bytes1+bytes2+bytes3+bytes4;
  40.   var startseck = startsece1;
  41.   var stopseck  = stopsece4;
  42.   //eltelt idő
  43.   var downloadtime  = millitime/1000;
  44.   //fájl méret különböző mértékegységben
  45.   var kbytes        = Math.round(bytes/1024);
  46.   var mbytes        = (kbytes/1024);
  47.   var bits          = Math.round(bytes*8);
  48.   //sebesség bits/s
  49.   var spdbitsec     = (Math.round(bits/downloadtime));
  50.   //sebesség kbits/s
  51.   var kbits_s       = (Math.round(spdbitsec/1000));
  52.   //sebesség mbits/s
  53.   var mbits_s       = ((kbits_s/1000));
  54.   //sebesség bytes/s
  55.   var spdbytesec    = (Math.round(bytes/downloadtime));
  56.   //sebesség kbytes/s
  57.   var spdkbytesec   = (Math.round(spdbytesec/1024));
  58.   //sebesség mbytes/s
  59.   var mbytes_sec    = ((spdkbytesec/1024));
  60.   //adatok módosítása    
  61.   document.getElementById("sebeskbitsec").innerHTML = kbits_s + '&nbsp;&nbsp;&nbsp;Kbps';
  62.   document.getElementById("sebesmbitsec").innerHTML = '('+mbits_s + '&nbsp;&nbsp;&nbsp;Mbps)';
  63.   document.getElementById("millitime").innerHTML = 'Letöltés ideje (msec): '+millitime;
  64.   document.getElementById("downloadtime").innerHTML = 'Letöltés ideje (sec): '+downloadtime;
  65.   //időpontok formázása
  66.   datum_start = new Date(parseInt(startseck));
  67.   ora1  = datum_start.getHours();
  68.   perc1 = datum_start.getMinutes();
  69.   mp1   = datum_start.getSeconds();
  70.   msec1  = datum_start.getMilliseconds()
  71.   datum_stop = new Date(parseInt(stopseck));
  72.   ora2  = datum_stop.getHours();
  73.   perc2 = datum_stop.getMinutes();
  74.   mp2   = datum_stop.getSeconds();
  75.   msec2  = datum_stop.getMilliseconds()
  76.   //sebesség átszámítás kijelzéshez
  77.   var skala_elem=document.getElementById("skalamax");
  78.   var valaszt_index = skala_elem.selectedIndex;
  79.   var valaszt_ertek = skala_elem.options[valaszt_index].text;
  80.   var valaszt_max = parseInt(valaszt_ertek);
  81.   var oszto = 5000;
  82.   switch (valaszt_max)
  83.   {
  84.     case 30000: {oszto = 150;; break;}
  85.     case 20000: {oszto = 100;; break;}
  86.     case 10000: {oszto = 50;; break;}
  87.     case 5000: {oszto = 25;; break;}
  88.     case 3000: {oszto = 15;; break;}
  89.     default:  {oszto = 25;; break;}
  90.   }
  91.   if (kbits_s < valaszt_max)
  92.   {
  93.     javit1 = parseInt(kbits_s/oszto);
  94.   }
  95.   else
  96.   {
  97.     javit1 = 200;
  98.   }
  99.   //ciklikus sebesség-mérések kijelzése
  100.   document.getElementById("rajzol").innerHTML = document.getElementById("rajzol").innerHTML +
  101.                              '<div class=\"elem\" style=\"height:'+ javit1 +'px;\" title=\"'+
  102.                              ora1+':'+perc1+'-'+kbits_s+'\"><\/div><div class=\"szunet\"><\/div>';
  103.   //időpontok kiírása
  104.   document.getElementById("startsec").innerHTML = 'Kezdet (h:m:s): '+ ora1+' : '+perc1+' : '+mp1;
  105.   document.getElementById("stopsec").innerHTML = 'Vég (h:m:s): '+ ora2+' : '+perc2+' : '+mp2;
  106.   //sebességek kiírása
  107.   document.getElementById("bits").innerHTML = 'Letöltött méret (bits): '+bits;
  108.   document.getElementById("bytes").innerHTML = 'Letöltött méret (bytes): '+bytes;
  109.   document.getElementById("kbytes").innerHTML = 'Letöltött méret (Kbytes): '+kbytes;
  110.   document.getElementById("mbytes").innerHTML = 'Letöltött méret (Mbytes): '+mbytes;
  111.   document.getElementById("spdbitsec").innerHTML = 'Sebesség (bits/sec): '+spdbitsec;
  112.   document.getElementById("kbits_s").innerHTML = 'Sebesség (Kbits/sec): '+kbits_s;
  113.   document.getElementById("mbits_s").innerHTML = 'Sebesség (Mbits/sec): '+mbits_s;
  114.   document.getElementById("spdbytesec").innerHTML = 'Sebesség (bytes/sec): '+spdbytesec;
  115.   document.getElementById("spdkbytesec").innerHTML = 'Sebesség (Kbytes/sec): '+spdkbytesec;
  116.   document.getElementById("mbytes_sec").innerHTML = 'Sebesség (Mbytes/sec): '+mbytes_sec;
  117.   //ismétlődő adatok
  118.   var spd_ertek = new Array(30000000,20000000,16000000,10000000,8000000,4000000,2000000,1544000,1000000,896000,768000,640000,
  119.                             512000,384000,256000,128000,64000,56000,28800,14400,9600,4800);
  120.   var savok = new Array(22);
  121.   for(var i = 0, to = savok.length; i < to; i++)   //sav-tároló feltöltés: 1-20
  122.   {
  123.     savok[i] = i+1;
  124.   }
  125.   //kijelző kirajzolása
  126.   for(i=0;i<savok.length;i++)
  127.   {
  128.     if (spdbitsec < spd_ertek[i] )
  129.       document.getElementById("sav"+savok[i]).innerHTML = '<div style="width:10px;height:15px;margin:0;padding:0;text-align:center;'+
  130.         'font-weight:bold;z-index:100;display:block;background-image: url(images/savkozepz.gif);background-position: 0 0;">&nbsp;<\/div>';
  131.     else
  132.       document.getElementById("sav"+savok[i]).innerHTML = '<div style="width:10px;height:15px;margin:0;padding:0;text-align:center;'+
  133.         'font-weight:bold;z-index:100;display:block;background-image: url(images/savkozepz.gif);background-position: 0 15px;">&nbsp;<\/div>';
  134.   }
  135. }
  136.  

Van még egy JS-eljárás, az  ismetel() , mely azonban nem ebben a fájlban található, hanem a  <HEAD>  részben került elhelyezésre.
(Működéséről különösebb magyarázat nem szükséges...)


Befejezésül még négy, szerkezetileg azonos, de méretben különböző képfájl letöltődéssel járó fájlról, a "méret-fájl"-ról, amelyekről még nem esett szó. Ezen *.php kiterjesztésű  méret-fájlok felépítése  hagyományos. Azonban azért kerül itt ismertetésre mivel a benne szereplő JS-kódok szükségesek a teljes rendszer működésének megértéséhez. A  <HEAD>  részben lévő JS-kódban történik az adott kép-fájl méretének lekérdezése/korrogálása és JS-változóban történő beírása. A  <BODY>  részben a változó egy azonosítóval rendelkező DIV-be kerül megjelenítésre.

««  méret-fájlok felépítése  »»

Kijelölés
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <?php
  2. header("Expires: Mon, 26 Jul 1990 05:00:00 GMT");  //Mikortól a múltban
  3. header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  4. header("Cache-Control: no-store, no-cache, must-revalidate");
  5. header("Cache-Control: post-check=0, pre-check=0", false);
  6. header("Pragma: no-cache");
  7. ?>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="hu">
  10. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  11. <title>Sebességteszt - 128kB</title>
  12. <meta http-equiv="Content-Language" content="hu" />
  13. <meta http-equiv="cache-control" content="no-cache">
  14. <meta http-equiv="expires" content="Thu, 19 Nov 1981 08:52:00 GMT">
  15. <meta http-equiv="pragma" content="no-cache">
  16. <script type="text/javascript">var meret = "<?php echo (filesize('random128.jpg')+1183); ?>";</script>
  17. </head>
  18. <div style="background-color:yellow;" id="meret"><script type="text/javascript">document.write(meret);</script></div>
  19. <?php echo '<img src="random128.jpg?t='.time().'" width="10" height="10" alt="" \/>'; ?>
  20. </body>
  21. </html>
  22.  

Miután az adott fájl betöltődött a rejtett IFRAME-be, a már korábban ismertetett módon történik a DIV-ek "innerHTML" értékének lekérdezése, további feldolgozása.
(Gondolom a megoldáshoz különösebb magyarázat nem szükséges hozzáfűzni...)



- Egy talált faágból akkor lesz sétapálca,
ha türelmesen és kitartóan elkezded faragni -
(anonymus)
xhtml   css   cc  

Reklámok