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

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>

आउटपुट

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

JavaScript से टाइपिंग इफेक्ट कैसे बनाएं?

"Click me" बटन पर क्लिक करने पर -

JavaScript से टाइपिंग इफेक्ट कैसे बनाएं?


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

    परिचय जावास्क्रिप्ट में const कीवर्ड (ES2015) का उपयोग उन वेरिएबल्स को घोषित करने के लिए किया जाता है जिन्हें पुनः असाइन नहीं किया जा सकता। हालांकि, यदि मान एक ऑब्जेक्ट या ऐरे है, तो इसकी प्रॉपर्टीज/एलिमेंट्स अभी भी मॉडिफाई की जा सकती हैं। उदाहरण निम्न कोड जावास्क्रिप्ट में कॉन्स्टेंट्स बनाने के ल

  1. JavaScript और CSS के साथ टाइपिंग और डिलीटिंग प्रभाव JavaScript और CSS के साथ टाइपिंग और डिलीटिंग प्रभाव

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

  1. CSS से ओवरले इफेक्ट (मोडल/पॉपअप) कैसे बनाएं? CSS से ओवरले इफेक्ट (मोडल/पॉपअप) कैसे बनाएं?

    ओवरले पूरे व्यूपोर्ट को कवर करता है (position: fixed; top: 0; left: 0; width/height: 100%)। डिफ़ॉल्ट display: none, बटन क्लिक पर JS से display: block। rgba बैकग्राउंड से पेज डिम होता है। सर्च बार और क्लोज बटन शामिल। उदाहरण <!DOCTYPE html> <html> <head> <link rel=stylesheet h