javascript - 如何使网格在背景上?

标签 javascript html css

我希望网格元素位于背景上,圆圈位于网格顶部。散点圆函数被注释掉,否则网格会消失。我不知道为什么....我知道出了点问题,因为我将圆圈和网格单元格作为 child 添加到同一个 div。但我不完全确定。 JSFiddle_Code

有什么想法吗?谢谢

var arr_circles = [];
var radius = 40;

var cell_side_len = 50;

var grid_width = 400;
var grid_height = 300;

var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";

//create grid
for(var i = 0; i < grid_width/cell_side_len; i++){
    for(var j = 0; j < grid_height/cell_side_len; j++){
    var cell = document.createElement('div');
    cell.style.boxSizing = "border-box";
    cell.style.height = cell_side_len + 'px';
    cell.style.width = cell_side_len + 'px';
    cell.style.border = "1px solid black";
    cell.style.float = "left";
    cell.style.position = "relative";
    container.appendChild(cell);
   }
}


//scatter();

function scatter(){

    while (container.firstChild) {
        container.removeChild(container.firstChild);
    }

    var numDisks = document.getElementById("numDisks").value;
    if( isNaN(numDisks) ) numDisks = 5;

    arr_circles = [];
    
    for(i = 0; i < numDisks; i++){
        var circle = document.createElement('circle');
        circle.style.cssText = ' width: 40px; height: 40px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; position: absolute; z-index: 9;';
        circle.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
        circle.style.left = Math.round(Math.random() * (grid_width - radius*2.5) + radius) + "px";
        circle.style.top = Math.round(Math.random() * (grid_height - radius*2.5) + radius) + "px";
        arr_circles.push(circle);
        container.appendChild(circle);
        dragElement(circle);


    }
    //Make the DIV element draggagle:
    //dragElement(document.getElementById(("circle")));

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      elmnt.onmousedown = dragMouseDown;
      

        function dragMouseDown(e) {
            e = e || window.event;
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }

    }
}
 <input type="text" id="numDisks" value="#ofcircles...">

<button onclick="scatter()">Scatter</button>

<div id="container"></div>

    

最佳答案

这是因为您在散点函数开始时删除了网格。只需删除 while 循环:

var arr_circles = [];
var radius = 40;

var cell_side_len = 50;

var grid_width = 400;
var grid_height = 300;

var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";

//create grid
for(var i = 0; i < grid_width/cell_side_len; i++){
    for(var j = 0; j < grid_height/cell_side_len; j++){
    var cell = document.createElement('div');
    cell.style.boxSizing = "border-box";
    cell.style.height = cell_side_len + 'px';
    cell.style.width = cell_side_len + 'px';
    cell.style.border = "1px solid black";
    cell.style.float = "left";
    cell.style.position = "relative";
    container.appendChild(cell);
   }
}

// scatter circles
scatter();

function scatter(){

//    while (container.firstChild) {
//        container.removeChild(container.firstChild);
//    }

    var numDisks = document.getElementById("numDisks").value;
    if( isNaN(numDisks) ) numDisks = 5;

    arr_circles = [];
    
    for(i = 0; i < numDisks; i++){
        var circle = document.createElement('circle');
        circle.style.cssText = ' width: 40px; height: 40px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; position: absolute; z-index: 9;background:red';
        circle.style.left = Math.round(Math.random() * (grid_width - radius*2.5) + radius) + "px";
        circle.style.top = Math.round(Math.random() * (grid_height - radius*2.5) + radius) + "px";
        arr_circles.push(circle);
        container.appendChild(circle);
        
 }
}
<input type="text" id="numDisks" value="#ofcircles...">

<button onclick="scatter()">Scatter</button>

<div id="container"></div>

关于javascript - 如何使网格在背景上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49763552/

相关文章:

javascript - 使用 Javascript 读取服务器端文件

javascript - AngularJs:在使用 ui 路由器时实现了 IIFE

jquery - Twitter Bootstrap 轮播事件

html - CSS 未应用于使用 WebView 的 OSX 应用程序

css - 应用于打印样式表的最佳字体是什么?

javascript - 从外部 JSON 文件获取文件内容

javascript - Phonegap onDeviceOnline

html - 在 HTML/CSS 中定位?

javascript - 如何延迟我的 float ShareBar 直到用户向下滚动页面

javascript - 调用时激活 div