Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट के साथ टाइपिंग इफेक्ट कैसे बनाएं?


JavaScript के साथ टाइपिंग इफेक्ट बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   button{
      padding:10px;
      font-size: 18px;
      background-color: rgb(128, 19, 218);
      color:white;
      border:none;
   }
   .heading{
      color:crimson;
   }
</style>
</head>
<body>
<h1>typeText</h1>
<button class="typeButton">Click me</button>
<h2 class="heading"></h2>
<script>
   document.querySelector('.typeButton').addEventListener('click',typeText);
   var i = 0;
   var text = 'This text is currently being typed across... It is still typing..';
   var speed = 50;
   function typeText() {
      if (i < text.length) {
         document.querySelector('.heading').innerHTML += text.charAt(i);
         i++;
         setTimeout(typeText, speed);
      }
   }
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

जावास्क्रिप्ट के साथ टाइपिंग इफेक्ट कैसे बनाएं?

मुझे क्लिक करें . पर क्लिक करने पर "बटन -

जावास्क्रिप्ट के साथ टाइपिंग इफेक्ट कैसे बनाएं?


  1. जावास्क्रिप्ट में स्थिरांक कैसे बनाएं? उदाहरण सहित स्पष्ट कीजिए।

    जावास्क्रिप्ट में स्थिरांक बनाने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html> <head> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    } </style> </head> <body> &

  1. जावास्क्रिप्ट और सीएसएस के साथ टाइपिंग और प्रभाव हटाना

    CSS एनिमेशन की मदद से, हम जावास्क्रिप्ट का उपयोग करके टाइपराइटर टाइपिंग और डिलीट इफेक्ट बना सकते हैं। निम्न उदाहरण इस प्रभाव को दर्शाता है। उदाहरण <!DOCTYPE html> <html> <style> div {    display: flex;    margin: 4%;    padding: 2%;    box-s

  1. सीएसएस के साथ ओवरले प्रभाव कैसे बनाएं?

    CSS के साथ एक ओवरले प्रभाव बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <style> body {    font-family: