मैंने बिना किसी किस्मत के इसके समाधान के लिए फ़ोरम को पूरी तरह से खोजा है। उम्मीद है कि कोई यहां मेरी मदद कर सकता है।

मेरे पास एक खाली div है जिसमें कोई पृष्ठभूमि छवि नहीं है। जब कोई उपयोगकर्ता उस पर क्लिक करता है, तो मेरे पास एक ऐसा फ़ंक्शन होता है जो पृष्ठभूमि छवि को इस तरह सेट करता है:

function myAnimation(element) {

    var images = ["url(images/pig.png)", "url(images/cat.png)", "url(images/frog.png)", "url(images/dog.png)"];

    var random = Math.floor(Math.random() * 4);

    element.style.backgroundImage = images[random];
}

हालांकि यह काम करता है, मुझे जिस समस्या का सामना करना पड़ रहा है वह समाधान ढूंढ रहा है जब उपयोगकर्ता फिर से छवि पर क्लिक करता है। चूंकि केवल चार संभावित संख्याएं उत्पन्न होती हैं, इसलिए मुझे var यादृच्छिक विधि से दोहराव संख्या प्राप्त होती रहती है। मुझे लगता है कि मुझे जेनरेट की गई अंतिम संख्या की जांच करने का एक तरीका चाहिए और यदि यह वही है, तो उसे एक अलग संख्या का प्रयास करना चाहिए और उत्पन्न करना चाहिए। इस तरह कोई दोहराई जाने वाली छवियां नहीं होंगी। आशा है कि यह समझ में आता है। जैसा कि आप जानते हैं, मैं प्रोग्रामिंग में नया हूं और पिछले 3 महीनों से केवल जावास्क्रिप्ट सीख रहा हूं। मुझे लगता है कि मुझे इस फ़ंक्शन के अंदर लूप या किसी अन्य फ़ंक्शन की आवश्यकता हो सकती है, निश्चित नहीं।

1
Simon Revill 29 मार्च 2018, 21:36

3 जवाब

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

मैं उत्पन्न यादृच्छिक संख्या के साथ prevNo की जाँच कर रहा हूँ। यदि दोनों समान हैं, तो फ़ंक्शन को फिर से कॉल करें। अन्यथा यादृच्छिक संख्या को prevNo पर असाइन करें और छवि लोड करें।

var prevNo = -1;
function myAnimation(element) {
    var images = ["url(images/pig.png)", "url(images/cat.png)", "url(images/frog.png)", "url(images/dog.png)"];

    var random = Math.floor(Math.random() * 4);
    if( random == prevNo) { 
        myAnimation(element);
        return;
    } else {
        prevNo = random;
    }
    element.style.backgroundImage = images[random];
}
1
abbastec 29 मार्च 2018, 18:50

आप अपने images को फ़िल्टर कर सकते हैं, वर्तमान पृष्ठभूमि तत्व को छोड़कर सभी मदों पर विचार करते हुए, और परिणाम का एक यादृच्छिक तत्व ले सकते हैं।

यह एक उदाहरण है कि आप इसे कैसे पूरा कर सकते हैं:

function myAnimation(element) {

    var currentBackgroundImage = element.style.backgroundImage;

    var images = [
      "url(https://place-hold.it/100x100&text=1)",
      "url(https://place-hold.it/100x100&text=2)",
      "url(https://place-hold.it/100x100&text=3)",
      "url(https://place-hold.it/100x100&text=4)",
    ];

    var restOfImages = images.filter(function (image) {
      return image !== currentBackgroundImage;
    })

    var random = Math.floor(Math.random() * restOfImages.length);

    element.style.backgroundImage = restOfImages[random];
}

दूसरा तरीका, बिना filter के:

function myAnimation(element) {

    var currentBackgroundImage = element.style.backgroundImage;

    var images = [
      "url(https://place-hold.it/100x100&text=1)",
      "url(https://place-hold.it/100x100&text=2)",
      "url(https://place-hold.it/100x100&text=3)",
      "url(https://place-hold.it/100x100&text=4)",
    ];

    var restOfImages = [];

    for(var i = 0; i < images.length; i++) {
      if (images[i] !== currentBackgroundImage) {
        restOfImages.push(images[i]);
      }
    }

    var random = Math.floor(Math.random() * restOfImages.length);
    element.style.backgroundImage = restOfImages[random];
}

और यहां एक कामकाजी स्निपेट है:

function myAnimation(element) {

    var currentBackgroundImage = element.style.backgroundImage;

    var images = [
      "url(https://place-hold.it/100x100&text=1)",
      "url(https://place-hold.it/100x100&text=2)",
      "url(https://place-hold.it/100x100&text=3)",
      "url(https://place-hold.it/100x100&text=4)",
    ];
    
    var restOfImages = images.filter(function (image) {
      return image !== currentBackgroundImage;
    })

    var random = Math.floor(Math.random() * restOfImages.length);

    element.style.backgroundImage = restOfImages[random];
}

var el = document.getElementById('container');

el.onclick= function() { myAnimation(el); };
#container{
  width: 100px;
  height: 100px;
  background-color: red;
}
<div id="container"></div>
1
muZk 29 मार्च 2018, 19:45