Home>

Effect demonstration chart:

Source code check

[Html code description]

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

[Css code description]

.in {
  height:20px;
  line-height:20px;
  width:20px;
  background-color:blue;
  text-align:center;
  color:white;
}

[JS code description]

<script>
var olist=document.getelementbyid ("list");
//Add a new li element
var oadd=document.createelement ("li");
//Set the css style of the new element
oadd.classname="in";
oadd.style.csstext="background-color:red;border-radius:50%";
//1s oadd replaces the 0th li
settimeout (function () {
  olist.replacechild (oadd, document.getelementsbytagname ("li") [0]);
  //Execute incrementnumber function after 1s
  settimeout (incrementnumber, 1000);
}, 1000);
function incrementnumber () {
  //Get the first li in olist
  var oli1=document.getelementsbytagname ("li") [1];
  //If it exists, replace it
  if (oli1) {
     olist.replacechild (oadd, oli1);
     settimeout (incrementnumber, 1000);
  }
}
</script>

The above content shares a simple devouring effect based on replacechild.Hope you like it.

  • Previous C # simple implementation of the child form to the parent form value
  • Next C ++ operator overloading rules