tasto strano by @LeoMosc - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

_parentApre collegamenti ipertestuali nell'elemento genitore
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<head>Tag primario di un documento HTML
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<i>Formatta il testo in corsivo/italico non enfatizzato
<html>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Casetta NEWTON+

esercitazione sulle celle

Analizzatore Exif

Calcolatrice Pitagora

Immagine PCTO [Toastmasters]

informatica|inglese

Esercizi 05/03/2024 es10

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

effect login
<!DOCTYPE html>
<html>
<body>
<h1>tasto strano</h1>
<style>.stran {
  background-color: blue;
  border: none;
  color: white;
  font-size: 20px;
  padding: 100px 100px;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 100%,0% 100%,0% 50%, 50% 50%);
  border-radius: 3px
}</style>
<button class="stran">
  o
</button>
  </body>
</html>
<h1>copia di effect1----->
</h1>
<div class="obj">
</div>
<br>
<br>
<br>
<br>
<h1>copia di caps lock cheker</h1>
<h1>|</h1>
<h1>\/</h1>
<h1>
  Caps Lock checker
</h1>
<input id="area" onkeyup="CheckCapsLock(event)" onclick="CheckCapsLock(event)" placeholder="Scrivi qualcosa in maiuscolo">
<span id="msg" style="display:none;">CAPS LOCK ATTIVO</span>
<br>
<hr>
<p>
  Scrivi all'interno dell'area di testo con il Caps Lock attivo.
</p>
<script> 
  function CheckCapsLock(event){
    if (event.getModifierState("CapsLock")) {
      // CAPS LOCK ATTIVO
      document.getElementById("msg").style.display = "block";
    } else {
      document.getElementById("msg").style.display = "none";

    }
  }
</script>
<!--numeri primi--->
<!DOCTYPE html>
<html>
<head>
	<title>Generatore di numeri primi</title>
	<script>
		function generatePrimes() {
    // Ottieni il limite superiore inserito dall'utente
    var limitStr = document.getElementById("limit").value;
    // Verifica se il campo di input è vuoto o negativo
    if (limitStr === "" || parseInt(limitStr) <= 0) {
               return;
    }
    // Converte la stringa in un numero intero
    var limit = parseInt(limitStr);

    // Genera i numeri primi utilizzando il crivello di Eratostene
    var sieve = new Array(limit + 1);
    for (var i = 0; i < sieve.length; i++) {
        sieve[i] = true;
    }
    sieve[0] = false;
    sieve[1] = false;
    for (var i = 2; i <= Math.sqrt(limit); i++) {
        if (sieve[i]) {
            for (var j = i * i; j <= limit; j += i) {
                sieve[j] = false;
            }
        }
    }

    // Mostra i numeri primi generati
    var output = document.getElementById("output");
    output.innerHTML = "";
    for (var i = 2; i <= limit; i++) {
        if (sieve[i]) {
            output.innerHTML += i + " ";
        }
    }
}

	</script>
</head>
<body>
	<h1>Generatore di numeri primi</h1>
	<p>Inserisci il limite superiore e premi il pulsante per generare i numeri primi:</p>
	<form>
		<label for="limit">Limite:</label>
		<input type="text" id="limit" name="limit">
		<button type="button" onclick="generatePrimes()">Genera</button>
	</form>
	<p id="output">Inserisci un valore positivo per il limite</p>
</body>
</html>
<html>
  <head>
  </head>
  <body>
    <h1>Sequenza di Fibonacci
    </h1>
    <p>Inserisci il numero di termini da visualizzare:
    </p>
    <input type="number" id="num" min="1">
    <button onclick="document.getElementById('result').innerHTML = fibonacci(document.getElementById('num').value)">Calcola
    </button>
    <p id="result">
    </p>
    <style>
    </style>
    <script type="text/javascript">
      function fibonacci(n) {
        var a = 0;
        var b = 1;
        var c;
        var s = "0 ";
        for(var i = 1; i < n; i++) {
          c = a + b;
          s += c + " ";
          a = b;
          b = c;
        }
        return s;
      }
    </script>
  </body>
</html>
<h1>
  copia di riconoscitore tasti
</h1>
<h1>
  |
</h1>
<h1>
  \/
</h1>
<!DOCTYPE html>
<html>
  <head>
    <title>Riconoscitore tasti
    </title>
   </head>
  <body>
    <h1>Riconoscitore tasti
    </h1>
    <p>Premi un tasto sulla tastiera!
    </p>
    <hr/>
    <h1 id="key1">...
    </h1>
    <h1 id="key2">...
    </h1>
    
    <script type="text/javascript">
      var keylogger = document.querySelector("#key1")
      var keycode = document.querySelector("#key2");
      window.addEventListener("keypress", (e) => {
        keylogger.innerHTML = "Chiave: " + e.key;
        keycode.innerHTML = "Codice: " + e.code;
      }
                             )
    </script>
  </body>
</html>
<h1>
  copia di loader bump
</h1>
<h1>
  |
</h1>
<h1>
  \/
</h1>
<html>
  <head>
  </head>
  <body>
    <!-- Codewith.it loader -->
    <div class="loader">
    </div>
    <style>
      body{
        background-color:#FFFFFF
      }
      .loader {
        background: rgb(255,255,255);
        background: radial-gradient(circle at 0px 0px, rgb(193,195,14), #FFFC2A);
        box-shadow: inset 0 0 4px #F7FF2A;
        width:10vh;
        border-radius: 100%;
        height:10vh;
        min-width:40px;
        min-height:40px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        border-radius:50%;
        transition:1s;
        animation: rotate-z 2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
        transform:rotatez(45deg);
      }
      @keyframes rotate-z {
        0% {
          border-radius:50%;
          transform:scale(0.5);
          box-shadow: inset 0 -0px 10px 20px #E0FF2A, 0 0 100px #0000009B;
        }
        50% {
          border-radius:50%;
          transform:scale(1);
          box-shadow: inset 0 0 15px #201F00;
        }
        100% {
          border-radius:50%;
          transform:scale(0.5);
          box-shadow: inset 0 -0px 10px 20px #FDFF2A, 0 0 100px #FFFAB09B;
        }
      }
      @keyframes rotate-s {
        0% {
          transform: scale(1) rotateZ(0);
          border-radius:50%;
        }
        40% {
          transform: scale(0.35) rotateZ(675deg);
          border-radius:10%;
        }
        50% {
          transform: scale(0.28) rotateZ(700deg);
          border-radius:20%;
        }
        75% {
          transform: scale(0.7) rotateZ(500deg);
          border-radius:40%;
          border:none;
        }
        100% {
          border-radius:50%;
          transform: scale(1) rotateZ(360deg);
        }
      }
    </style>
    <script type="text/javascript">
    </script>
  </body>
</html>

body{
  background-color:#A3A3A3
}
/*effect1 perche sopra non funziona*/
.obj {
  background: rgb(36,35,0);
  background: -o-linear-gradient(315deg, rgb(68,65,0) 0%, rgb(119,121,9) 30%, rgb(255,251,0) 100%);
  background: linear-gradient(135deg, rgb(68,66,0) 0%, rgb(121,112,9) 30%, rgb(255,234,0) 100%);
  -webkit-box-shadow: inset 0 0 100px #fff7;
          box-shadow: inset 0 0 100px #fff7;
  width:30vh;
  border-radius:50%;
  height:30vh;
  top:0;
  bottom:0;
  left:200;
  right:0;
  margin:auto;
  -webkit-animation: rotate-s 7s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
  animation: rotate-s 7s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
}

@-webkit-keyframes rotate-s {
 0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    border-radius:50%;
  }
  40% {
    -webkit-transform: scale(0.3) rotateZ(675deg);
    transform: scale(0.3) rotateZ(675deg);
    border-radius:0%;
box-shadow: inset 15px 15px 5px white
  }
    50% {
    -webkit-transform: scale(0.28) rotateZ(700deg);
    transform: scale(0.28) rotateZ(700deg);
    border-radius:0%;
      box-shadow: inset 0px 0px 80px #fff9;
  }
  75% {
    -webkit-transform: scale(0.7) rotateZ(500deg);
    transform: scale(0.7) rotateZ(500deg);
    border-radius:40%;
    border:none;
  }
  100% {
    border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}

@keyframes rotate-s {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    border-radius:50%;
  }
  40% {
    -webkit-transform: scale(0.3) rotateZ(675deg);
    transform: scale(0.3) rotateZ(675deg);
    border-radius:0%;
box-shadow: inset 15px 15px 5px white
  }
    50% {
    -webkit-transform: scale(0.28) rotateZ(700deg);
    transform: scale(0.28) rotateZ(700deg);
    border-radius:0%;
      box-shadow: inset 0px 0px 80px #fff9;
  }
  75% {
    -webkit-transform: scale(0.7) rotateZ(500deg);
    transform: scale(0.7) rotateZ(500deg);
    border-radius:40%;
    border:none;
  }
  100% {
    border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}
.obj:hover{

  -webkit-animation: rotate-f 4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
  animation: rotate-f 4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
@keyframes rotate-f {
  20% {
	border-radius:30%;
       -webkit-transform: scale(0.8) rotateZ(800deg);
    box-shadow:inset 0 0 60px #fff;
  }
  40% {
	border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
  }
      100% {

  }
}