Javascript HTML动态背景文本_Javascript_Html_Css

Javascript HTML动态背景文本

javascript html css

Javascript HTML动态背景文本,javascript,html,css,Javascript,Html,Css,我的网页目标是让背景成为一个随机的0和1字符串，并以设定的时间间隔进行更改。如果您运行以下代码，您将看到我已经完成了任务。但是，在继续之前，我需要解决两个问题：（1）如何使0和1的字符串正好适合它们所在的容器？或者这可能吗？我做了一项黑客工作，改变字符串的长度，直到溢出并隐藏溢出（2）如何在该背景上构建页面的其余部分？我把背景设为div是对的吗？我试着跟随这里所做的：我的网站 #mtx_bckgd { z指数：-1；字体系列：信使新；高度：1000px；宽度：1000px； }

我的网页目标是让背景成为一个随机的0和1字符串，并以设定的时间间隔进行更改。如果您运行以下代码，您将看到我已经完成了任务。但是，在继续之前，我需要解决两个问题：

（1）如何使0和1的字符串正好适合它们所在的容器？或者这可能吗？我做了一项黑客工作，改变字符串的长度，直到溢出并隐藏溢出

（2）如何在该背景上构建页面的其余部分？我把背景设为div是对的吗？我试着跟随这里所做的：


我的网站
#mtx_bckgd
{
z指数：-1；
字体系列：信使新；
高度：1000px；
宽度：1000px；
}
#mtx_bckgd>p
{
单词包装：打断单词；
颜色：#D8D8D8；
}
函数更改\u bckgd（）
{
var bitstr=“”；
对于（变量i=0；i<4000；++i）
bitstr+=Math.floor（Math.random（）*10）%2？“0”：“1”；
document.getElementById（“mtx_txt”）.innerHTML=bitstr；
}

设置间隔（更改为bckgd，200）；
这当然是可能的。尝试使用vw（视图宽度）（实际上，它是视图宽度的百分比，因此1vw是窗口宽度的1%）和vh（视图高度）代替px作为单位
这对于宽度非常有效，但对于高度，如果内容太大，它将溢出div并显示在下方。因此，我们必须使用溢出：隐藏在CSS中隐藏任何溢出到div下面的额外1或0
（2） 我创建了两个独立的div，而不是嵌套的div。一个是你的背景，另一个是你的页面内容。然后我们使用position:absolute将它们放置在相同的位置left和top现在可以控制它们在页面上的位置，所以我只是将两个div设置为具有相同的left和top
请注意，我稍微更改了您的命名方案。bckgd指的是1和0的div，content指的是页面内容。这意味着我稍微改变了你的javascript。像往常一样，花时间调查并研究解决方案
<html>
<head>
    <title>my site</title>
    <style type="text/css">
        #mtx_bckgd
        {
            position: absolute;
            left: 0;
            top: 0;
            word-wrap: break-word;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        #mtx_content
       {
            position: absolute;
            left: 0;
            top: 0;
            word-wrap: break-word;
            color: red;
        }
    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 9000; ++i)
                bitstr += Math.floor(Math.random()*10) % 2 ? "0" : "1";
            document.getElementById("mtx_bckgd").innerHTML = bitstr;

        }
    </script>


</head>
<body>
    <div id="mtx_bckgd">I am background</div>
    <div id="mtx_content">Hi I am some content!</div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>


我的网站
#mtx_bckgd
{
位置：绝对位置；
左：0；
排名：0；
单词包装：打断单词；
高度：100vh；
宽度：100vw；
溢出：隐藏；
}
#mtx_含量
{
位置：绝对位置；
左：0；
排名：0；
单词包装：打断单词；
颜色：红色；
}
函数更改\u bckgd（）
{
var bitstr=“”；
对于（变量i=0；i<9000；++i）
bitstr+=Math.floor（Math.random（）*10）%2？“0”：“1”；
document.getElementById（“mtx_bckgd”）.innerHTML=bitstr；
}
我是背景
嗨，我有些满足！
设置间隔（更改为bckgd，200）；
现在已完全回答。我的第一个答案没有正确使用vw和vh，并且缺少溢出：隐藏；。
<html>
<head>
    <title>my site</title>
    <style type="text/css">
        #mtx_bckgd
        {
            position: absolute;
            left: 0;
            top: 0;
            word-wrap: break-word;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        #mtx_content
       {
            position: absolute;
            left: 0;
            top: 0;
            word-wrap: break-word;
            color: red;
        }
    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 9000; ++i)
                bitstr += Math.floor(Math.random()*10) % 2 ? "0" : "1";
            document.getElementById("mtx_bckgd").innerHTML = bitstr;

        }
    </script>


</head>
<body>
    <div id="mtx_bckgd">I am background</div>
    <div id="mtx_content">Hi I am some content!</div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>