Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptとCSSを使用したエフェクトの入力と削除

CSSアニメーションの助けを借りて、JavaScriptを使用してタイプライターの入力および削除効果を作成できます。

次の例は、この効果を示しています。

例

<!DOCTYPE html>
<html>
<style>
div {
   display: flex;
   margin: 4%;
   padding: 2%;
   box-shadow: inset 0 0 12px blue;
}
p {
   font-family: "Courier Monospace";
   font-size: 2em;
   color: red;
}
p:last-of-type {
   animation: type 0.33s infinite;
}
@keyframes type{
   to { opacity: .0; }
}
</style>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
   let word = words[i].split("");
   var loopTyping = function() {
      if (word.length > 0) {
         document.getElementById('text').innerHTML += word.shift();
      } else {
         deleteNow();
         return false;
      };
      counter = setTimeout(loopTyping, 200);
   };
   loopTyping();
};
function deleteNow() {
   let word = words[i].split("");
   var loopDeleting = function() {
      if (word.length > 0) {
         word.pop();
         document.getElementById('text').innerHTML = word.join("");
      } else {
         if (words.length > (i + 1)) {
            i++;
         }
         else {
            i = 0;
         };
         typeNow();
         return false;
      };
      counter = setTimeout(loopDeleting, 200);
   };
   loopDeleting();
};
typeNow();
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

JavaScriptとCSSを使用したエフェクトの入力と削除


  1. JavaScriptでCSS変数を取得および設定する

    getComputedStyle（）メソッドは、ターゲット要素に適用されたすべてのスタイルを含むオブジェクトを提供します。 getPropertyValue（）メソッドは、計算されたスタイルから目的のプロパティを取得するために使用されます。 setProperty（）は、CSS変数の値を変更するために使用されます。 例 次の例は、JavaScriptを使用してCSS変数を取得および設定する方法を示しています。 <!DOCTYPE html> <html> <head> <style> :root {    --outerCo

  2. CSSとJavaScriptでアコーディオンを作成するにはどうすればよいですか？

    CSSとJavaScriptを使用してアコーディオンを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background-color: #eee;    cursor: pointer;    paddi