Question

上周，我们从一家涉及JS的公司进行了快速测试。该任务的目的是尽您所能使用JavaScript。

任务是： 1.在String上实现一个“ spacify”函数，该函数返回一个字符串，其中所有字符之间都留有空格，仅用于h1。（以前从未听说过，但是我猜测这就像字母间距吗？但是它实际上是如何工作的？）

将headerText变量中的内容添加到h1项（对此没有问题，但是如果还有另一种方法，我想知道（：）
在每篇文章上设置随机backgroundColor （我发现了如何为单个ID执行此操作。但是我希望它出现在所有文章都有不同颜色的所有文章中，只要加载网站，该文章就会切换，如何用我编写的代码来做到这一点？）
使文章显示在5列中。（我想您可以只使用一个简单的浮点数？因为我在查看如何在这一点上使用网格时遇到问题。）
所有内容必须可见，并且每行项目的高度必须相等。（这很容易，我不需要它的帮助，但是我应该如何循环它，所以我只需要写一次，而不是多次？）
在较小的屏幕上调整列=>在移动屏幕上调整2列，在平板电脑上调整3列。（我从未听说过通过Java进行移动适应之类的事情，因此，如果只允许使用JS，您会怎么做？）
创建看起来像附加的gif动画的悬停效果。

我的代码（我知道其中有些是错误的。.但是，请尽我所能）

var headerText = spacify('hello world')

var spacify = funtion(str) {

    return str.split('').join(' ');
};

document.getElementById("overskrift").innerHTML = headerText;

    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = "rgba(" + x + "," + y + "," + z + ")";
var a = getElementsByTagName(article);

function random() {
        style.background = bgColor;
        style.width = "20%";
        style.height = "260px";
        style.cssFloat = "left";
    }

random();

html, body {
    padding:0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

section {
    position: relative;
    overflow:hidden;
}

article {
    margin: 0px;
    padding: 30px;
}

<h1 id="overskrift"></h1>


<section>
    <article id="r1" class="Artikler" onmouseover="bg_Image(this)">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit dui, consectetur pretium ipsum sed, placerat elementum augue. In quis suscipit enim. Suspendisse potenti.
            Sed vehicula mauris non sodales molestie.Nulla euismod justo at rutrum fringilla.
        </p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>Praesent convallis sem eu enim viverra, et porta augue porttitor. Ut euismod iaculis metus in suscipit. Curabitur consectetur velit a ligula lobortis dapibus.</p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>
            Vivamus egestas velit sed libero maximus, tempor dapibus lacus tempus. Proin tristique est eros, eget consectetur diam eleifend et. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas.
        </p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec faucibus metus et dolor sagittis accumsan. Morbi non dolor vestibulum, dictum risus nec, efficitur arcu.</p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>Aliquam suscipit urna nec faucibus euismod. Proin suscipit facilisis ullamcorper. In ultrices sodales massa, eu auctor eros interdum sed.</p>
    </article>

    @*break*@

    <article onmouseover="bg_Image(this)">
        <p>
            Praesent et ullamcorper mi, eget porttitor tellus. Fusce sem sapien, faucibus at condimentum dictum, commodo vitae risus. Nullam sit amet sodales diam.
            Integer eu dolor ut lacus posuere tincidunt a nec augue.
        </p>
    </article>

    <article onmouseover="bg_Image(this)" onmouseout="bgColor">
        <p>
            Vestibulum mollis felis vitae eros facilisis, sit amet scelerisque massa scelerisque. Vivamus vitae malesuada dui. Donec ut sapien id sem feugiat
            elementum ac ac orci. Fusce dictum eleifend felis, a sollicitudin neque suscipit vel.
        </p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>
            Vivamus egestas velit sed libero maximus, tempor dapibus lacus tempus. Proin tristique est eros, eget consectetur diam eleifend et.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Donec faucibus metus et dolor sagittis accumsan. Morbi non dolor vestibulum, dictum risus nec, efficitur arcu.
        </p>
    </article>

    <article onmouseover="bg_Image(this)">
        <p>Aliquam suscipit urna nec faucibus euismod. Proin suscipit facilisis ullamcorper. In ultrices sodales massa, eu auctor eros interdum sed.</p>
    </article>

</section>

缩小背景，更改背景并进行移动调整JS

0 个答案: