<html>
    <body>
        //Id for each item
        <p id=1></p>
        <p id=2></p>
        <p id=3></p>
        <script>
            for(i = 0; i < 3; i++) {
                window.setTimeout(press, 1000);
                //Should use For loop variable to fetch and print specific element's Id
                function press() {
                    document.getElementById(i).innerHTML = i;   
                }
            }
        </script>
    </body>
</html>

मैं इस सब के लिए थोड़ा मूर्ख हूँ। इनमें से अधिकतर आदेश मुझे w3schools से मिले हैं और मैं बस सब कुछ एक साथ थोड़ा-थोड़ा करके टुकड़े करने की कोशिश कर रहा हूं।

2
Yeetster 1 अक्टूबर 2019, 06:22

3 जवाब

सबसे बढ़िया उत्तर

आप टाइमआउट फ़ंक्शन के माध्यम से एक तर्क पारित कर सकते हैं, इसलिए हम इसका उपयोग पहले मान को प्रदर्शित करने के लिए कर सकते हैं, फिर इसे बढ़ा सकते हैं और यदि मान <= 3 है तो टाइमआउट फिर से शुरू करें:

window.setTimeout(press, 1000, 1);
//Should use For loop variable to fetch and print specific element's Id
function press(j) {
  document.getElementById(j).innerHTML = j;
  if (++j <= 3) window.setTimeout(press, 1000, j);
}
//Id for each item
<p id=1></p>
<p id=2></p>
<p id=3></p>
5
Nick 1 अक्टूबर 2019, 03:34

या वैकल्पिक रूप से आप इस तरह से लूप बना सकते हैं:

<html>
<body>
    //Id for each item
    <p id=1></p>
    <p id=2></p>
    <p id=3></p>
    <script>
        function press(i) {
            if (i < 3) {
                setTimeout(function () {
                    i++;
                    document.getElementById(i).innerHTML = i;
                    press(i);
                }, 1000);
            }
        }
        press(0);
    </script>
</body>
</html>
1
Hasta Dhana 1 अक्टूबर 2019, 03:43

जावास्क्रिप्ट का एक विकल्प इसके लिए CSS का उपयोग करना होगा। एक बोनस के रूप में, जावास्क्रिप्ट अक्षम होने पर भी आपका पृष्ठ काम करेगा।

सबसे पहले, आइए कुछ साफ, मान्य मार्कअप के साथ शुरू करें:

<html>
  <body>
    <div class="popIn">
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>      
  </body>
</html>

अब, आपका सीएसएस (जैसे <style> टैग में <head>), एक कीफ़्रेम एनीमेशन जोड़ें जो दृश्यता को अंतिम सेकंड में visible पर सेट करता है:

@keyframes popIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

अब, .popIn के सभी प्रत्यक्ष वंशजों को चुनने के लिए एक नियम जोड़ें। इस चयनकर्ता में, > का अर्थ प्रत्यक्ष वंशज है, और * का अर्थ कुछ भी है। नियम हमारे एनिमेशन को सेट करेगा।

.popIn > * {
  animation: 1s popIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

यदि आप इस कोड को अभी चलाते हैं, तो आप देखेंगे कि 1 सेकंड के बाद, सब कुछ एक ही बार में दिखाई देता है। हमें बस इतना करना है कि अलग-अलग पैराग्राफ को क्रम में चुनें और एनीमेशन की अवधि बदलें।

.popIn *:nth-child(2) {
  animation-duration: 2s;
}

.popIn *:nth-child(3) {
  animation-duration: 3s;
}

अब, पैराग्राफ एक के बाद एक प्रदर्शित होंगे, और कोई स्क्रिप्टिंग आवश्यक नहीं थी!

3
Brad 1 अक्टूबर 2019, 03:46