Native JS Implementation of the Don’t Step on White Blocks Game (4)》, to bring you the specific code analysis in the CDiv method.
The relevant js part in the source code of the Don’t Step on White Blocks game is as follows:<script> var main = document.getElementById('main') go = document.getElementById('go') count = document.getElementById('count'); //设置四种颜色 cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E']; //动态创建div function CDiv(classname) { var Div = document.createElement('div') //生成随机数 index = Math.floor(Math.random() * 4) //添加class Div.className = classname //循环创建div为块 for (var i = 0; i < 4; i++) { var iDiv = document.createElement('div') Div.appendChild(iDiv) } if (main.children.length == 0) { main.appendChild(Div); } else { main.insertBefore(Div, main.children[0]); } Div.children[index].style.backgroundColor = cols[index]; Div.children[index].className = "i"; } </script>
appendChild()
method can append to the node’s child node list Add new child nodes at the end.
insertBefore()Method inserts a new child node before the existing child node you specify. This section is a detailed introduction to the CDiv method in the Don’t Step on White Blocks game. Due to the length of the article, we will continue to analyze the remaining js code for you in later articles.
The above is the detailed content of Native JS implements the don't step on white block game (5). For more information, please follow other related articles on the PHP Chinese website!