मेरे पास 3 सूची आइटम वाला एक HTML कोड है और मेरे उल के लिए आईडी 'व्यायाम 6-सूची' है

<ul id="exercise6-list">

<li>List 1</li>

<li>List 2</li>

<li>List 3</li>

</ul>

मुझे प्रत्येक ली को तीन सेकंड के लिए चमकाना है और खुद को दोहराना है

अब तक मैंने लिखा है:

var moveGlow = function() {

 var element = document.querySelector("#exercise6-list");

 // ... to make it glow i've so far used .setAttribute("class", "glow")

};

clearInterval(window.interval);
window.interval = setInterval(moveGlow, 3000);

*मैं प्रोग्रामिंग के लिए बहुत नया हूं, लेकिन आपकी मदद के लिए धन्यवाद

-2
hii 3 नवम्बर 2020, 23:45

5 जवाब

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

एक समयबद्ध कार्य करने के लिए हम setInterval का उपयोग करते हैं, और वर्तमान तत्व में "चमक" वर्ग जोड़ते हैं, और उस वर्ग को पिछले वाले से हटा देते हैं।
तत्वों के माध्यम से चक्र करने के लिए, हम एक सूचकांक-चर का उपयोग करते हैं, जो प्रति चक्र बढ़ता है और आवश्यक होने पर वापस घूमता है।

let index = 0;
let elements = document.querySelector("#exercise6-list").children;
let glowFunc = () => {
  if (elements.length <= 0) { // Actually not needed since we know there are 3 elements
    index = 0;
    return;
  }
  index %= elements.length; // Map index to valid values
  elements[(elements.length + index - 1) % elements.length].classList.remove("glow"); // Remove "glow" from previous element
  elements[index].classList.add("glow"); // Add "glow" to current element
  ++index; // Increase 'index'
};

glowFunc(); // Initial call to "start" it without initial delay
setInterval(glowFunc, 3000); // Make it a timed function
li {transition: background-color 0.2s}
.glow {background-color: orange}
<ul id="exercise6-list">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
0
Oskar Grosser 11 नवम्बर 2020, 16:12
Array.from(element.children).forEach(child => {
  child.classList.add('glow');
  
  setTimeout(() => child.classList.remove('class'), 3000);
});

हालांकि, मुझे सोच अजीब चीजें होंगी यदि आप प्रत्येक li अंतराल से अधिक समय तक चमकते हैं, जिसे आपने वर्तमान में 300 पर सेट किया है।

यदि आप jQuery जैसी किसी चीज़ का उपयोग करते हैं, तो आपको मैन्युअल रूप से पुनरावृति करने की आवश्यकता नहीं है।

0
weltschmerz 3 नवम्बर 2020, 23:55
var d=document.querySelector("#exercise6-list");
d.style="background-color:yellow;"
setTimeout(()=>{
  d.style=""
},3000)
//time is measured in milliseconds.. simple math
<div style="background-color:yellow" id="exercise6-list">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</div>
0
The Bomb Squad 4 नवम्बर 2020, 00:06

सेट इंटरवल के बजाय मैंने सेटटाइमआउट का उपयोग किया क्योंकि अंतराल तब तक चलता रहता है जब तक आप इसे रोकते नहीं हैं, जहां टाइमआउट केवल एक बार होता है तो आपको इसे फिर से चलाना होगा।

यह कोड एक पुनरावर्ती फ़ंक्शन है जो यह निर्धारित करने के लिए काउंटर का उपयोग करता है कि सूची में लूप वर्तमान में कहां है।

var parent = document.querySelector("#exercise6-list");
var children = parent.querySelectorAll("li");
var total = children.length;

function glow(counter) {

  children.forEach(function(el) {
    el.classList.remove("highlight");
  });

  el = children[counter];

  el.classList.add("highlight");
  setTimeout(function() {
    if (counter < total - 1) {
      counter++;
      glow(counter);
    }
    else{
     el.classList.remove("highlight");
    }
  }, 3000);
}

glow(0);
.highlight {
  background: red;
  color: #fff
}
<ul id="exercise6-list">
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>
0
imvain2 4 नवम्बर 2020, 00:00

यहाँ async प्रतीक्षा के साथ एक पुनरावर्ती समाधान है।

var moveGlow = async function() {
 var element = document.querySelector(".box");
 element.style.background = "green";
 await sleep(3000)
 element.style.background = "red"
 await sleep(3000);
 return moveGlow()
}

let sleep = (time) => new Promise(res => setTimeout(res, time))

moveGlow()
.box {
   width: 100px;
   height: 100px;
   background: red;
}
<div class="box">

</div>
0
Ifaruki 3 नवम्बर 2020, 23:57