1. JavaScript / Говнокод #162

    +29

    1. 1
    <html> <head> <style type="text/css"> html, body { background-color:#000; font-family:Segoe UI, Tahoma, Arial, sans-serif; font-size:11px; color:#FFF; margin:0px; padding:0px; width:100%; height:100%; overflow:hidden; } a:link, a:visited, a:active { color:#CCC; text-decoration:underline; } a:hover { color:#F00; text-decoration:none; } #progressbar_block { width:100%; height:100%; padding-left:50%; padding-top:50%; overflow:hidden; } ul.progressbar { width:400px; height:50px; padding:0px; margin:0px; margin-left:-200px; margin-top:-25px; clear:both; list-style-type:none; } ul.progressbar li { padding:0px; margin:0px; float:left; } li.left { background-image:url(img/l_bg_n.png); background-repeat:no-repeat; width:20px; height:50px; } li.middle { background-image:url(img/m_bg_n.png); background-repeat:repeat-x; width:360px; height:50px; } li.right { background-image:url(img/r_bg_n.png); background-repeat:no-repeat; width:20px; height:50px; } </style> <script language="javascript"> function func() { var max = 400 - 16; var pixels = 400 - 16; var step = pixels/max; next(0); } function next(i) { var max = 400 - 16; var pixels = 400 - 16; var step = pixels/max; var lft = document.getElementById("left_pb"); var mid = document.getElementById("middle_pb"); var rht = document.getElementById("right_pb"); if(i < 12) lft.style.width = String(8 + i) + "px"; else lft.style.width = String(20) + "px"; if(i < pixels - 12 && i > 12) mid.style.width = String(i - 12) + "px"; else if(i > 12) mid.style.width = String(360) + "px"; else mid.style.width = String(0) + "px"; if(i > 372) rht.style.width = String(i - 372) + "px"; else if(i < 372) rht.style.width = String(0) + "px"; setTimeout("next(" + (i + step < pixels ? i + step : 0) + ")", 25); } </script> </head> <body onload="func();"> <div id="progressbar_block"> <ul class="progressbar"> <li class="left"><div id="left_pb" style="background-image:url(img/l_bg_a.png); width:8px; height:50px; overflow:hidden;">&nbsp;</div></li> <li class="middle"><div id="middle_pb" style="background-image:url(img/m_bg_a.png); width:0px; height:50px; overflow:hidden;">&nbsp;</div></li> <li class="right"><div id="right_pb" style="background-image:url(img/r_bg_a.png); width:0px; height:50px; overflow:hidden;">&nbsp;</div></li> </ul> </div> </body> </html>

    Вот так мы делаем прогресс-бары

    Запостил: guest, 14 Декабря 2008

    Комментарии (2) RSS

    • ava guest 14.12.2008 09:46 # 0

      AsketMan:
      В одну строчку =(
      Может администрация добавит функциональность форматирования кода по стандартам? =)
      Ответить

    • ava guest 14.12.2008 11:29 # 0

      armicron:
      в оригинале, он тоже в одну строчку
      Ответить

    Добавить комментарий