原生js代码挑战之动态添加双色球

最新推荐文章于 2022-05-03 21:59:36 发布

weixin_30340819

最新推荐文章于 2022-05-03 21:59:36 发布

阅读量171

点赞数

原文链接：http://www.cnblogs.com/blackchaos/p/6648868.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>doubleColorBall</title>
</head>
<body>
<script>
let ballArr = []; 
window.onload = function(){
  let btn = document.createElement("button");
  btn.innerHTML = "Click the button to start！";
  btn.onclick = runGo;
  document.getElementsByTagName("body")[0].appendChild(btn);
}
function runGo(){
  for(let i = 0;;i++){
    if(ballArr.length < 6){
      generateRandom();
    }else{
      sortArr();
      break;  
    }
  }   
}
function generateRandom(){ 
  let random = Math.ceil(Math.random()*32); 
  for(let i = 0 ; i < ballArr.length; i++){ 
    if(ballArr[i] === random){ 
      return false; 
    } 
  } 
  ballArr.push(random);
} 
function sortArr(){
  for(let i = 0;i < ballArr.length;i++){
    for(let n = 0;n < i + 1;n++){
      if(ballArr[n] > ballArr[i]){
        let sec = ballArr[n];
        ballArr[n] = ballArr[i];
        ballArr[i] = sec;
      }
    }
  }
  pushArr();
}
function pushArr(){
  let div = document.createElement("div"); 
  for(let i = 0;i < ballArr.length;i++){
    let ball = document.createElement("span");
    ball.style.display = "inline-block";
    ball.style.width ="30px";
    ball.style.height = "30px";
    ball.style.margin = "2px";
    ball.style.lineHeight = "30px";
    ball.style.color = "white";
    ball.style.textAlign = "center";
    ball.style.borderRadius = "20px";
    ball.style.background = "red";
    ball.innerHTML = ballArr[i];
    div.appendChild(ball);
  }
  ballArr = [];
  let ball = document.createElement("span");
  ball.style.display = "inline-block";
  ball.style.width ="30px";
  ball.style.height = "30px";
  ball.style.margin = "2px";
  ball.style.lineHeight = "30px";
  ball.style.color = "white";
  ball.style.textAlign = "center";
  ball.style.borderRadius = "20px";
  ball.style.background = "blue";
  ball.innerHTML = Math.ceil(Math.random()*16);
  div.appendChild(ball);  
  document.getElementsByTagName("body")[0].appendChild(div);
}
</script>
</body>
</html>

更多内容请访问我的个人博客： Bblog

转载于:https://www.cnblogs.com/blackchaos/p/6648868.html

weixin_30340819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js代码挑战之动态添加双色球

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>doubleColorBall</title></head><body><script>let ballAr...
复制链接

扫一扫