Search the Community
Showing results for tags 'javascript'.
Found 5 results
-
HTML: <body> <div class="light"> <ul class="line"> <li class="red"></li> <li class="yellow"></li> <li class="blue"></li> <li class="pink"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="pink"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="pink"></li> <li class="green"></li> <li class="blue"></li> <li class="pink"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> </ul> </div> <h1>Merry Christmas ! </h1> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> </body> CSS: $green: #24D024; $yellow: #fff952; $pink: #f53896; $red: #fb4545; $blue: #0A53DE; @import url('https://fonts.googleapis.com/css?family=Cookie'); body { background-color: #000000; } h1 { font-family: 'Cookie', cursive; font-size: 80px; text-align: center; color: white; letter-spacing: 3px; } .drop { position: absolute; top: 0; z-index: 1; border-radius: 100%; background-color: #fff; box-shadow: 0 0 10px #FFF } .animate { animation: falling 5.5s infinite ease-in; } @keyframes falling { 0% { top: -10px; // opacity: 1; } 10% { transform: translateX(-5px) } 20% { transform: translateX(5px) } 30% { transform: translateX(-5px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-5px) } 70% { transform: translateX(5px) } 80% { transform: translateX(-5px) } 90% { transform: translateX(5px) } 95% { opacity: 1 } 100% { top: 95vh; opacity: 0; } } .line{ text-align: center; } li { position: relative; margin: 0 15px; list-style: none; padding: 0; display: inline-block; width: 12px; height: 28px; border-radius: 50%; top: 35px; background: #fff; &:before { content: ""; position: absolute; background: #222; width: 10px; height: 9px; border-radius: 3px; top: -4px; left: 1px; } &:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 19px; border-bottom: solid #222 2px; border-radius: 30%; } } .red { background-color: $red; animation: lightningRed 1s infinite; } .green { background-color: $green; animation: lightningGreen 0.8s infinite; } .yellow { background-color: $yellow; animation: lightningYellow 0.9s infinite; } .blue { background-color: $blue; animation: lightningBlue 1.1s infinite; } .pink { background-color: $pink; animation: lightningPink 1.2s infinite; } @keyframes lightningRed { 0% { box-shadow: 5px 10px 35px 10px $red; } 50% { box-shadow: none; } 100% { box-shadow: 5px 10px 35px 10px $red; } } @keyframes lightningGreen { 0% { box-shadow: 5px 0 35px 10px $green; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $green; } } @keyframes lightningYellow { 0% { box-shadow: 5px 0 35px 10px $yellow; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $yellow; } } @keyframes lightningBlue { 0% { box-shadow: 5px 0 35px 10px $blue; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $blue; } } @keyframes lightningPink { 0% { box-shadow: 5px 0 35px 10px $pink; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $pink; } } @media (max-width: 1024px) { .line{ padding: 0; } li { margin: 0 15px 20px 15px; } } Javascript : $(function() { function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; var limit_flake = 50; setInterval(function() { let dimension = randomInt(3, 9) + "px"; var flake = "<div class='drop animate' style='left:" + randomInt(10, window.innerWidth - 20) + "px;width:" + dimension + ";height:" + dimension + "'></div>"; $('body').append(flake); var list_flake = $('.drop'); if (list_flake.length > limit_flake) list_flake[list_flake.length - 1].remove(); }, 200); })
-
Script: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { color: darkblue; } </style> </head> <body> <p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <script> function myFunction(x) { x.classList.toggle("fa-thumbs-down"); } </script> </body> </html>
-
Script: <!DOCTYPE html> <html> <style> #text {display:none;color:red} </style> <body> <h3>Detect Caps Lock</h3> <p>Press the "Caps Lock" key inside the input field to trigger the function.</p> <input id="myInput" value="Some text.."> <p id="text">WARNING! Caps lock is ON.</p> <script> var input = document.getElementById("myInput"); var text = document.getElementById("text"); input.addEventListener("keyup", function(event) { if (event.getModifierState("CapsLock")) { text.style.display = "block"; } else { text.style.display = "none" } }); </script> </body> </html>
-
- 1
-
-
- tehnologie
- html
- (and 2 more)
-
Creați un buton care va duce utilizatorul în partea de sus a paginii atunci când faceți clic pe el."Scroll Back To Top Button" Pasul 1. Add HTML: Exemplu: <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> Pasul 2: Pasul 2. Add CSS: #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } Pasul 3. Add JavaScript: //Get the button: mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }
-
- 1
-
-
- tehnologie
- html
- (and 4 more)
-
Saalutare, mai jos o sa va pun cod-ul pentru un Analog Clock. HTML <!DOCTYPE html> <html> <head> <title>Analog Clock - GameLife Romania</title> </head> <body bgcolor="yellow"> <div id="cont"> <h id="twelve"></h> <h id="six"></h> <h id="nine"></h> <h id="three"></h> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="cir"></div> </div> </body> </html> CSS #cont{ height:270px; width:270px; border-radius:50%; background-color:#000; position:absolute; overflow:hidden; left:0;right:0;top:0;bottom:0; margin:auto; box-shadow:0 0 9px 5px red; } #hour{ height:60px; width:5px; background-color:white; position:absolute ; top:-60px; left:0; right:0; bottom:0; margin:auto; transform:rotate(90deg); transform-origin: bottom; box-shadow:0 0 9px 5px orange; border-radius:30%; } #min{ height:80px; width:5px; background-color:white; position:absolute ; top:-80px; left:0; right:0; bottom:0; margin:auto; transform:rotate(0deg); transform-origin: bottom; box-shadow:0 0 9px 5px orange; border-radius:30%; opacity:1; } #sec{ height:110px; width:5px; background-color:white; position:absolute ; top:-110px; left:0; right:0; bottom:0; margin:auto; transform:rotate(-45deg); box-shadow:0 0 9px 5px orange; transform-origin:bottom; border-radius:30%; } #cir{ height:15px; width:15px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background-color:white; box-shadow:0 0 9px 5px deeppink; border-radius:50%; opacity:1; } h{ position:absolute ; height:20px; width:5px; margin:auto; background:white; box-shadow:0 0 9px 5px deeppink; } #twelve{ right:0; left:0; top:0; } #six{ right:0; left:0; bottom:0; } #nine{ top:0; bottom:0; left:0; height:5px; width:20px; } #three{ top:0; bottom:0; right:0; height:5px; width:20px; } JAVASCRIPT function setDeg(){ var date= new Date(); var hours = ( date.getHours() + date.getMinutes()/60) / 12 * 360; var mins = date.getMinutes() / 60 * 360; var secs = ( date.getSeconds() + date.getMilliseconds()/1000) /60 * 360; document.getElementById('hour').style.transform = 'rotate('+hours+'deg)'; document.getElementById('min').style.transform = 'rotate('+mins+'deg)'; document.getElementById('sec').style.transform = 'rotate('+secs+'deg)'; } setInterval(setDeg,1); DOVADA
