Question

我正在尝试使用JavaScript和jQuery编写一个函数（因为我已经在我的网站上使用jQuery）来检测视口的宽度并输出一个字符在整个宽度上重复。

我正在尝试创建一个看起来像unix终端的网站，我希望表头使用等号在屏幕宽度上重复（表格设置为width: 100%; ）。我知道我可能只是制作一个简单的等号图像，并在空标题行上使用repeat-x将其设置为CSS，但我更喜欢它是文本。我一直在玩数组，这是我到目前为止所做的。

var windowWidth =$(window).width();
document.write( array( windowWidth ) ).join( '=' ) );

我知道这已经破了，但那是我离开的地方，因为我无法弄清楚我应该用什么搜索词来找到答案。因此，如果有人不介意帮助我写这个或指出我正确的方向，我会很感激。

Answer 1

这可能会有所改善，但您可以通过以下方式实现：

将单个字符附加到正文，并获取其宽度，然后将其删除。
将正文的宽度除以字符的宽度，以获得重复字符的次数。

实施例

var $char = $('<span>').css({ padding: 0, margin: 0 }).text('=').appendTo('body'),
    charWidth = $char.width(),
    numberOfChars = parseInt(( $('body').width() / charWidth ).toFixed(), 10);

$char.remove();
document.write( Array(numberOfChars).join('=') );

Here's a fiddle

Answer 2

我的看法：

for (
    var x = Math.floor(
    $("body").append("<span>=</span>").width() / $($("body").children()[0]).width());

    x > 1;

    x-- && $("body").append("<span>=</span>")
);

将$("body")更改为您要添加内容的任何元素。

http://jsfiddle.net/8suma/

在元素的整个宽度上重复一个字符

2 个答案:

实施例

Here's a fiddle