Question

我想在整个屏幕上用javascript重复跨度。但是，我不知道我是怎么做到的。我的代码是：

CSS：

span.box{
    width:125px;
    height:125px;
    position: absolute;
    border:1px solid black;
    margin:3px 3px 3px 3px;
}

HTML：

<span class="box">Some content</span>

这里是fiddle。

谢谢你的javascript。（不是高级PLZ。我用javascript不是最好的）

Answer 1

在非常具体的案例中，您可能正在寻找以下内容： JSFiddle

CSS

span.box {
    width:125px;
    height:125px;
    border:1px solid black;
    display: inline-block;
    margin:3px 3px 3px 3px;
    padding:3px 3px 3px 3px;
}

的JavaScript

var ww = window.innerWidth,
    wh = window.innerHeight,
    ew = 125, // element width in px 
    eh = 125, // element height in px 
    xn = Math.floor( ww / ew ), // elements per row
    yn = Math.floor( wh / eh ), // rows
    n = xn * yn; // number of elements

for( var i = 0 ; i < n ; i++ ) {

    var box = document.createElement( "span" ),
        txt = document.createTextNode( "Some content" );

    box.className = "box";
    box.appendChild( txt );
    document.body.appendChild( box );

}

Answer 2

试试这个：

function addSpan(n, content){
  var body = document.getElementByTagName('body');
  var item = '<span class="box">'+content+'</span>';
  for (var i = 0; i < n; i++){
    body.innerHTML += item;
  }
}

n：跨度数，内容：每个范围内的字符串内容

在屏幕上重复跨度javascript

2 个答案: