Strona główna / Nowości

AKTYWNA BATERIA Z UŻYCIEM KODU HTML+CSS+JS


  • Rysowanie za pomocą kodu HTML/CSS/JS (użyto: HTML+CSS+JS).
  • Tutaj też nie ma obrazów jest to tylko i wyłącznie kod


    Kliknij - lub + aby zmienić wartość baterii.
    -
    +
    ///////////////////////////// HTML ///////////////////////////// <div id="hint">Kliknij - lub + aby zmienić wartość baterii.</div> <div id="buttons"> <div class="less">-</div> <div class="more">+</div> </div> <div id="battery"></div> ///////////////////////////// CSS ///////////////////////////// body { background: #000; } #hint { color: #CCC; font-family: Arial, sans-serif; font-size: 19px; line-height: 30px; text-align: center; letter-spacing: 1px; display: none; position: relative; z-index: 10; opacity: .75; background: #000; } #buttons { position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -60px; font-size: 73px; color: #FFF; width: 500px; line-height: 120px; vertical-align: middle; } #buttons .more, #buttons .less { -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; cursor: pointer; opacity: .5; } #buttons .more:hover, #buttons .less:hover { opacity: 1; } #buttons .less { float: left; } #buttons .less:active { color: #C00; } #buttons .more { float: right; } #buttons .more:active { color: #0C0; } #battery { position: absolute; left: 50%; top: 50%; width: 250px; height: 120px; margin-left: -142px; margin-top: -60px; border-radius: 0.33333333px; border-left: 2px solid rgba(255, 255, 255, 0.2); border-right: 2px solid rgba(255, 255, 255, 0.2); background-image: linear-gradient(to right, transparent 5%, #316d08 5%, #316d08 7%, #60b939 8%, #60b939 10%, #51aa31 11%, #51aa31 60%, #64ce11 61%, #64ce11 63%, #255405 63%, #000000 68%, #000000 95%, transparent 95%), linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.4) 4%, rgba(255, 255, 255, 0.2) 7%, rgba(255, 255, 255, 0.2) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%); } #battery:before { display: block; position: absolute; content: ''; width: 12px; height: 55px; right: -14px; top: 32px; border-top-right-radius: 6px 10px; border-bottom-right-radius: 6px 10px; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%); background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%); } #battery:after { display: block; position: absolute; content: ''; width: 220px; height: 120px; left: 10px; border-radius: 0.16666667px; border-left: 4px solid black; border-right: 4px solid black; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.2) 5%, transparent 5%, transparent 14%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.05) 48%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.3) 87%, rgba(255, 255, 255, 0.3) 92%, transparent 92%, transparent 97%, rgba(255, 255, 255, 0.4) 97%), -webkit-linear-gradient(right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 2%, #000000 2%, #000000 6%, transparent 6%), -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.3) 90%, rgba(255, 255, 255, 0) 90%); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.2) 5%, transparent 5%, transparent 14%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.05) 48%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.3) 87%, rgba(255, 255, 255, 0.3) 92%, transparent 92%, transparent 97%, rgba(255, 255, 255, 0.4) 97%), -moz-linear-gradient(right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 2%, #000000 2%, #000000 6%, transparent 6%), -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.3) 90%, rgba(255, 255, 255, 0) 90%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.2) 5%, transparent 5%, transparent 14%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.05) 48%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.3) 87%, rgba(255, 255, 255, 0.3) 92%, transparent 92%, transparent 97%, rgba(255, 255, 255, 0.4) 97%), -o-linear-gradient(right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 2%, #000000 2%, #000000 6%, transparent 6%), -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.3) 90%, rgba(255, 255, 255, 0) 90%); background-image: linear-gradient(rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.2) 5%, transparent 5%, transparent 14%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.05) 48%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.3) 87%, rgba(255, 255, 255, 0.3) 92%, transparent 92%, transparent 97%, rgba(255, 255, 255, 0.4) 97%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 2%, #000000 2%, #000000 6%, transparent 6%), linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.3) 90%, rgba(255, 255, 255, 0) 90%); } ///////////////// js + jquerty dodaj /////////////////
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
    /////////////////dostępny w źródle tej strony///////////////// $(function(){ showOff(); noInput = setTimeout(function(){ // Nudge the user with a hint $("#hint").show(); },8000); }); var mouseTimer,showingOff,noInput, charge = default_charge = 63; $("#battery").click(function(){ clearInterval(noInput); showOff(); }); $("div","#buttons").mousedown(function(){ clearInterval(noInput); var charging = $(this).hasClass("more"); mouseTimer = setInterval(function(){ // Continuously increase/decrease battery while clicking/holding //console.log("Holding mouse down!"); if(charge>12 && !charging){ charge--; }else if(charge<89 && charging){ charge++; }else{ return false; } batUpdate(); },250); }).click(function(){ clearInterval(noInput); clearInterval(mouseTimer); if(charge>12 && !$(this).hasClass("more")){ charge--; }else if(charge<89 && $(this).hasClass("more")){ charge++; }else{ return false; } batUpdate(); }); $(document).mouseup(function(){ clearInterval(mouseTimer); return false; }); function batUpdate(){ //console.log("Charge: ",charge); if(charge<20){ // Red - Danger! col = ["#750900","#c6462b", "#b74424", "#df0a00", "#590700"]; }else if(charge<40){ // Yellow - Might wanna charge soon... col = ["#754f00","#f2bb00", "#dbb300", "#df8f00", "#593c00"]; }else{ // Green - All good! col = ["#316d08","#60b939", "#51aa31", "#64ce11", "#255405"]; } $("#battery").css("background-image","linear-gradient(to right, transparent 5%, "+col[0]+" 5%, "+col[0]+" 7%, "+col[1]+" 8%, "+col[1]+" 10%, "+col[2]+" 11%, "+col[2]+" "+ (charge-3) +"%, "+col[3]+" "+ (charge-2) +"%, "+col[3]+" "+ charge +"%, "+col[4]+" "+ charge +"%, black "+ (charge+5) +"%, black 95%, transparent 95%), linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0.2) 14%, rgba(255,255,255,0.8) 14%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.4) 86%, rgba(255,255,255,0.6) 90%, rgba(255,255,255,0.1) 92%, rgba(255,255,255,0.1) 95%, rgba(255,255,255,0.5) 98%)"); } function showOff(){ clearInterval(showingOff); var chgInt = 8; if(charge < 40){ // Charge it up! showingOff = setInterval(function(){ if(charge+chgInt<63){ // Last update charge = charge+chgInt; batUpdate(); }else{ charge = 63; batUpdate(); clearInterval(showingOff); } },350); }else{ showingOff = setInterval(function(){ if(charge-chgInt>11){ // Last update charge = charge-chgInt; batUpdate(); }else{ charge = 63; batUpdate(); clearInterval(showingOff); } },350); } }

bdo
kod html