Fatal编程技术网

在javascript中创建框

javascript

在javascript中创建框,javascript,Javascript,我正在尝试使用javascript在页面顶部创建多个框。我有一个框，但不知道如何在页面顶部设置多个框。这就是我到目前为止所做的： <html> <head> <title>Boxes on Boxes on Boxes</title> <link rel="stylesheet" type="text/css" href="boxes.css"> <script language="JavaSc

我正在尝试使用javascript在页面顶部创建多个框。我有一个框，但不知道如何在页面顶部设置多个框。这就是我到目前为止所做的：

    <html>
  <head>
    <title>Boxes on Boxes on Boxes</title>
    <link rel="stylesheet" type="text/css" href="boxes.css">
    <script language="JavaScript">
        el=document.getElementById("box1");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.left=width*Math.random();
        el.style.top=height*Math.random();

        el=document.getElementById("box2");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.right=width*Math.random();
        el.style.top=height*Math.random();

        el=document.getElementById("box3");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.middle=width*Math.random();
        el.style.top=height*Math.random();

    </script>
  </head>
  <body>
    <div id="box1">
      First box 
    </div>

    <div id="box2">
        Second box
    </div>

    <div id="box3">
        Third box
    </div>
  </body>
</html>
您需要将
元素移到末尾，或者将代码包装到DOM就绪或onload处理程序中，因为否则
getElementById（）
将找不到任何元素，因为它们尚未被解析

然后您需要在
左侧
和
顶部
样式属性中包含一个单元（例如，
“px”
）

此外，无需重新计算每个框的
宽度
和
高度
，因为您对每个框都进行相同的计算。（您应该使用
var
声明变量，但良好的实践并不是使其工作的必要条件。）

以下是一个工作版本：

    var el=document.getElementById("box1");
    var width=window.innerWidth-50;
    var height=window.innerHeight-50;
    el.style.left=width*Math.random() + "px";
    el.style.top=height*Math.random() + "px";

    el=document.getElementById("box2");
    el.style.right=width*Math.random() + "px";
    el.style.top=height*Math.random() + "px";

    el=document.getElementById("box3");
    el.style.middle=width*Math.random() + "px";
    el.style.top=height*Math.random() + "px";
演示：

此外，CSS中的
左
和
顶
属性应使用
：
非
=



    <html>
  <head>
    <title>Boxes on Boxes on Boxes</title>
    <style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
    position:absolute;
    left:100px;
    top:100px;      
}
#box1, #box2, #box3, #box10, #box11, #box12 {
    padding:5px;
    width:50px;
    height:50px;
    cursor:pointer;
    float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
    padding:5px;
    width:50px;
    height:50px;
    cursor:pointer;
}   
#box1, #box4, #box7, #box10{
    background-color:orange;
}
#box2, #box5, #box8, #box11 {
    background-color:blue;
}
#box3, #box6, #box9, #box12{
    background-color:green;
}
#box4, #box7 {
    font-family: Arial;
}
#box5, #box8 {
    font-family: Courier;
}
#box6, #box9 {
    font-family: Tahoma;
}   
#textbook {
    padding: 5px;
    background-color:red;
}
    </style>
    <script language="JavaScript">
        width=window.innerWidth;
        height=window.innerHeight;
    function boxes() {  
        document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
        document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
        document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
        document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
        document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
        document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;  
        document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
        document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
    }

    function colorChange(field,group) {
        switch (group) {
            case 1:
                document.getElementById("box2").style.backgroundColor = field.innerText;
                break;
            case 4:
                document.getElementById("box11").style.backgroundColor = field.innerText;
                break;
        }       
    }
    function fontChange(field,group) {
        switch (group) {
            case 2:
                document.getElementById("box5").style.fontFamily = field.innerText;
                break;
            case 3:
                document.getElementById("box8").style.fontFamily = field.innerText;
                break;
        }       
    }       
    </script>
  </head>
  <body onload="boxes()">
    <div id="box_group1">
        <div id="box1" onclick="colorChange(this,1)">
            Orange 
        </div>

        <div id="box2" onclick="colorChange(this,1)">
            Blue
        </div>

        <div id="box3" onclick="colorChange(this,1)">
            Green
        </div>
    </div>
    <div id="box_group2">
        <div id="box4" onclick="fontChange(this,2)">
            Arial 
        </div>

        <div id="box5" onclick="fontChange(this,2)">
            Courier
        </div>

        <div id="box6" onclick="fontChange(this,2)">
            Tahoma
        </div>
    </div>
    <div id="box_group3">
        <div id="box7" onclick="fontChange(this,3)">
            Arial
        </div>

        <div id="box8" onclick="fontChange(this,3)">
            Courier
        </div>

        <div id="box9" onclick="fontChange(this,3)">
            Tahoma
        </div>
    </div>
    <div id="box_group4">
        <div id="box10" onclick="colorChange(this,4)">
            Orange 
        </div>

        <div id="box11" onclick="colorChange(this,4)">
            Blue
        </div>

        <div id="box12" onclick="colorChange(this,4)">
            Green
        </div>
    </div>
    <div id="textbook">Textbook</div>
  </body>
</html>


盒子上的盒子上的盒子
#盒子组1、#盒子组2、#盒子组3、#盒子组4、#教科书{
位置：绝对位置；
左：100px；
顶部：100px；
}
#第1栏、第2栏、第3栏、第10栏、第11栏、第12栏{
填充物：5px；
宽度：50px；
高度：50px；
光标：指针；
浮动：左；
}
#第四箱、第五箱、第六箱、第七箱、第八箱、第九箱{
填充物：5px；
宽度：50px；
高度：50px；
光标：指针；
}   
#第1栏、第4栏、第7栏、第10栏{
背景颜色：橙色；
}
#第二箱、第五箱、第八箱、第十一箱{
背景颜色：蓝色；
}
#第三箱、第六箱、第九箱、第十二箱{
背景颜色：绿色；
}
#第四栏，第七栏{
字体系列：Arial；
}
#第5栏，第8栏{
字体系列：信使；
}
#第6栏，第9栏{
字体系列：Tahoma；
}   
#教科书{
填充物：5px；
背景色：红色；
}
宽度=window.innerWidth；
高度=窗内高度；
函数框（）{
document.getElementById（“box\u group1”）.style.left=（width document.getElementById（“box\u group1”）.offsetWidth）/2；
document.getElementById（“box\u group2”）.style.top=（height document.getElementById（“box\u group2”）.offsetHeight）/2；
document.getElementById（“框组3”）.style.left=width-100-document.getElementById（“框组3”）.offsetWidth；
document.getElementById（“box\u group3”）.style.top=（height document.getElementById（“box\u group3”）.offsetHeight）/2；
document.getElementById（“box_group4”）.style.left=（width document.getElementById（“box_group4”）.offsetWidth）/2；
document.getElementById（“box\u group4”）.style.top=height-100-document.getElementById（“box\u group4”）.offsetHeight；
document.getElementById（“教科书”）.style.left=（width document.getElementById（“教科书”）.offsetWidth）/2；
document.getElementById（“教科书”）.style.top=（height document.getElementById（“教科书”）.offsetHeight）/2；
}
函数颜色更改（字段、组）{
交换机（组）{
案例1：
document.getElementById（“box2”）.style.backgroundColor=field.innerText；
打破
案例4：
document.getElementById（“box11”）.style.backgroundColor=field.innerText；
打破
}       
}
功能更改（字段、组）{
交换机（组）{
案例2：
document.getElementById（“box5”）.style.fontFamily=field.innerText；
打破
案例3：
document.getElementById（“box8”）.style.fontFamily=field.innerText；
打破
}       
}       
橙色
蓝色
绿色
Arial
信使
塔荷马
Arial
信使
塔荷马
橙色
蓝色
绿色
教科书
很难理解你想要什么，也许是这个

<script>
window.onload = function() {
    var titles = ["First box", "Second box", "Third box"]
    var width=window.innerWidth-50
    var height=window.innerHeight-50-120
    for (var i = 0; i < titles.length; i++) {
        var el = document.createElement('div')
        console.log(el)
        el.innerHTML = titles[i]
        el.style.position = "absolute"
        el.style.border = "1px solid rgb(0,0,0)"
        el.style.left= (width / titles.length) * i
        el.style.top=0
        el.style.width = width / titles.length
        el.style.height = "120px"
        document.body.appendChild(el);
    }
    for (var i = 0; i < titles.length; i++) {
        var el = document.createElement('div')
        console.log(el)
        el.innerHTML = titles[i]
        el.style.position = "absolute"
        el.style.border = "1px solid rgb(0,0,0)"
        el.style.left=0
        el.style.top=(height / titles.length) * i + 120
        el.style.width = "120px"
        el.style.height = height / titles.length
        document.body.appendChild(el);
    }
}
</script>



window.onload=函数（）{
变量标题=[“第一个方框”、“第二个方框”、“第三个方框”]
变量宽度=窗口。内部宽度-50
var高度=窗内高度-50-120
对于（变量i=0；i
使用jQuery尝试以下操作：

在这里，框应该是动态创建的，不需要命名id的硬编码，也应该用代码以更好的方式完成。现在创建4个框更容易了，大约100个或更多。因此，明智的做法是始终采取更好的方式来保持工作的可伸缩性

HTML:

<div id="mainDiv">

</div>
jQuery:

// general css for all divs inside mainDiv 
#mainDiv div{
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;  
    float : left;
}

$(document).ready(function(){
    // taking a color array
    var colorArray = new Array("red", "green", "gray", "blue");
    // loop through as many boxes you want to create
    for(var i = 1; i <= colorArray.length; i++){
        $("#mainDiv").append("<div id=Box" + i + "></div>");
        //changing the background-color 
        $("#Box"+ i).css("background-color", colorArray[i-1]);
    }
});

$（文档）.ready（函数（）{
//使用颜色数组
var colorArray=新数组（“红色”、“绿色”、“灰色”、“蓝色”）；
//循环浏览要创建的任意多个框

对于（var i=1；i）它是否在那些结束大括号处掉落？您不需要它们。您是否检查了浏览器的调试控制台？您还需要在页面加载事件中执行此操作，即。

$(document).ready(function(){
    // taking a color array
    var colorArray = new Array("red", "green", "gray", "blue");
    // loop through as many boxes you want to create
    for(var i = 1; i <= colorArray.length; i++){
        $("#mainDiv").append("<div id=Box" + i + "></div>");
        //changing the background-color 
        $("#Box"+ i).css("background-color", colorArray[i-1]);
    }
});