tasto strano by @LeoMosc - Codewith.it

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

Referenze

<table>Tag primario per la creazione di tabelle
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
heightDetermina l'altezza di un elemento HTML in pixel
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
classDefinisce una o più classi per elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

vendita ebay(2)

Comunicare sul Web [Template CSS]

La mia prima pagina HTML

Tagliaerba Automatico Ecovacs GOAT

SCHEDA 4 INFORMATICA

Istogramma a colonne

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% {

  }
}