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

var ballArr = []; //存放已有的红球,用来排除重复和排序
window.onload = function(){
var btn = document.createElement("button");
btn.innerHTML = "按键开始传球!";
btn.onclick = turnRunGo;
document.getElementsByTagName("body")[0].appendChild(btn);
}
//当有重复数字时循环直到长度达到6
function turnRunGo(){
for(let i = 0;;i++){
if(ballArr.length < 6){
generateRandom();
}else{
sortArr();
break; //for循环结束
}
}
}
// 生成随机数
function generateRandom(){
var random = Math.ceil(Math.random()*33);
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]){
var sec = ballArr[n];
ballArr[n] = ballArr[i];
ballArr[i] = sec;
}
}
}
pushArr();
}
//将随机数排序后放入html中
function pushArr(){
var div = document.createElement("div");
for(let i = 0;i < ballArr.length;i++){
var ball = document.createElement("span");
ball.style.display = "inline-block";
ball.style.width ="30px";
ball.style.height = "30px";
ball.style.color = "white";
ball.style.textAlign = "center";
ball.style.borderRadius = "20px";
ball.style.background = "red";
ball.innerHTML = ballArr[i];
div.appendChild(ball);
}
//放入蓝球
var ball = document.createElement("span");
ball.style.display = "inline-block";
ball.style.width ="30px";
ball.style.height = "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);
}

时间: 2024-10-11 14:58:39

原生js代码挑战之动态添加双色球的相关文章

js活jQuery实现动态添加、移除css/js文件

下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function addCss(filename){ var creatHead = $('head'); creatHead.append('<link rel="stylesheet" href="'+filename+'">') } // 移除css/js文件 functi

原生 JS 代码和用 jQuery 实现效果各有什么优劣势

通过自己的理解再加上自己收集的一些资料总结如下: 各種封裝,主要目的就是爲了省心,拿jq來說: JQ对不同浏览器的事件,DOM对象,都进行了封装,各种操作都可以直接兼容各种浏览器, 要知道, 不同浏览器的区别不仅仅是在CSS里写"-webkit-"还是"filter"的区别, 连事件模型这种底层的东西都不一样= = JQ特有的CSS-LIKE选择器, 链式写法, 封装的各类animate函数, 封装了的异步加载, 都大幅提高了开发效率, 减少重复劳动 JQ用dela

js获取不到动态添加的标签的值的解决方法

遇到了js无法获得动态添加的标签的值,百度了一番,最后自己解决了问题,但是原理现在还不怎么明确. $("input[id='txtAttValue']").each(function (i) { if ($(this).val().trim() == "") { $("span[id='error']").eq(i).css("display", "block"); } }); 好像也只有$("s

JS实现表格Table动态添加删除行

1.页面内容 <table style="border:1px ; width:100%; height:160px">                <THEAD>                    <TR>                    <TH height="10px">姓名</TH>                    <TH height="10px">

奇舞js笔记——第0课——如何写好原生js代码

摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当程序员). 注: 1.学习视频地址 2.ppt地址 3.个人感想: 是我hin厉害的师父推荐我看的月影大大的视频,感觉对于我这个小白来说,真的是一遍又一遍的刷新知识面.我觉得像月影大大这种大佬的思路,我接触之后真的是受益匪浅. 所以我总结出来不仅是自己记笔记,也是想分享给想要成为真正的前端“工程师”

使用JS实现页面中动态添加文件上传输入项

1. 编写JSP 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <title>My JSP 'uplo

原生js代码水平导航栏效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* 标签和文本结合区域效果制作: 1.用ul做分类标签 2.把ul的display定义为block使ul区域和下面div区域结合在一起 3.

js、jquery、动态添加option项

var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){     //循环添加多个值 sid.option[i] = new Option(i,i); } sid.options[sid.options.length]=new Option("1","2");   // 在最后一个值后面添加多一个 JQuery: [html] view plaincopy &

原生js实现删除class和添加class

内容来自百度搜索 //判断样式是否存在 function hasClass(ele, cls) {     return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); } //为指定的dom元素添加样式 function addClass(ele, cls) {     if (!this.hasClass(ele, cls)) ele.className += " "