文字动画 javascript div

Question

我有一个动画背景，它以柔和的色调随机显示 0 和 1 并填满整个屏幕，我试图在上面显示文本，但它似乎不起作用。有人可以帮忙吗？这是html代码

<p style="font-size:20px;z-index:-1;" class="back"></p>
<div class="main">
<p style="font-size:100px;z-index:1;">Hello!There!</p>
</div>
</div>

这是 JavaScript 代码

var lines=10;
var lenght=100;
function getcolor()
{ var color='#';
    var letters = "BCDEF";
   for(var i=0;i<6;i++)
   {color+= letters[Math.floor(Math.random() * 5)];}
    return color;}
function genstring()
{var letters="01010101010101"
 var string="<p>"
 for(var i=0;i<2000;i++)
 {for(var j=0;j<Math.floor(Math.random()*10);j++)
  {
    string+=letters[Math.floor(Math.random()*2)];
  }
  string+=" "
 }
 string+="</p>"
return string;
}
function changer()
{var x=genstring()
var y=document.querySelector(".back")
var color=getcolor()
y.innerHTML=x
y.style.color=color}
setInterval("changer()",1300)

完整代码在repl上：https://repl.it/@Ajkallivayalil/about#script.js 当前的输出如下所示：https://about--ajkallivayalil.repl.co/。预先感谢您的帮助^^

Answer 1

您的文本 ("Hello! There!") 存在，它就在屏幕字段下方（因为它在另一个 <div> 块中，默认情况下通过引擎放置在第一个 <div> 下方<div> 在网页上的顺序）。您可以通过 Chrome 开发人员工具检查您的 div.main 元素或更改页面比例以查看它的位置。

你可以用它做什么：

将属性 position: absolute; top: 40px; left: 40px; 添加到 <p style="font-size:100px;z-index:1;">Hello!There!</p> 的 style

然后它看起来像这样： <p style="font-size:100px;z-index:1;position: absolute; top: 40px; left: 40px;">Hello!There!</p>

只需将 div.main 放在 <div style="width:100%;height:100%;overflow:hidden;"> 上（div 和 01010101010101）在 HTML 代码

文字动画 javascript div

Text over animated javascript div

html

javascript

css

frontend

repl.it