需要在页面加载之前显示 div

Question

我想在加载页面之前显示这个 codepen html 代码，然后在一些用户输入页面加载之后。

基本上，我试图在页面加载时显示以下 codepen div，这将要求用户选择某些内容，然后在成功选择后页面加载剩余内容。 但我需要一点帮助。 我也在 javascript 中尝试了 window.load() 但没有结果。

https://codepen.io/leenalavanya/pen/XdrOzg?editors=1100

 function g(a, n) { var divs = ""; for (var s = 0; s < 50; s++) { divs += '<div class="div ball" id="' + getRandom() + '"></div>'; } document.getElementById(a).innerHTML += divs; } g('h1'); g('h3'); function f(x, n, a) { var t = 0; setInterval(function() { if (t < 50) { x.style.bottom = (46 * t * n - t * t) + 20 + 'px'; x.style.height = 10 - t / 4.6 + 'px'; x.style.width = 10 - t / 4.6 + 'px'; if (t > 15) { x.style.left = (a * t + 150) + 'px'; x.style.bottom = (46 * t * n * n - t * t) + 20 + 'px'; } t += 1.3 } }, 50) } function Launch() { if ($('.revealleft,.revealright').hasClass('revealed')) { var i; for (i = 0; i < 150; i++) { var x = document.getElementsByClassName('div')[i]; var a = parseInt(x.id); x.style.left = '150px'; f(x, 1 + ((Math.random() * 5) + 1) / 100, a) } } } function getRandom() { return Math.random() * 10 - 5 }

 html,body{background:#e6e6e6;width:100%;height:100%;padding:0;margin:0;overflow:hidden} .reveal{width:600px;height:350px;box-shadow:0 0 30px -5px grey;background:#fff;margin:calc(50vh - 175px) auto;max-width:96%;position:relative;overflow:hidden} .revealleft,.revealright{width:50%;background:#dc143c;height:100%;position:absolute;left:0;transition:all 1s} .revealright{left:50%} .revealleft.revealed{left:-50%} .revealright.revealed{left:100%} .reveal button{opacity:.99;margin:15px;padding:8px 15px;background:#dc143c;border:2px solid #fff;border-radius:6px;color:#fff;cursor:pointer;position:absolute} .reveal button:hover{background:#fff;color:#dc143c;outline:0;border-color:#dc143c} .reveal button:focus{outline:0} h1{font-family:'Montserrat',sans-serif;font-size:4vw;margin:50px 30px 35px;text-align:center;color:#dc143c} p{margin:0 30px;font-family:'Montserrat',sans-serif;color:grey;font-size:.8em;line-height:1.7em} img{width:160px;float:right;margin:5px 0 5px 20px} .ball{width:10px;height:10px;border-radius:100%;position:absolute;bottom:20px;left:50%;background:#dc143c} #h1,#h3{position:absolute;bottom:-15px;width:300px;height:100%;z-index:100;pointer-events:none;-webkit-transform-origin:center bottom}

 <div id="h1" style="left:-150px;-webkit-transform:rotate(7deg)"> </div> <div id="h3" style="right:-140px;-webkit-transform:rotate(-7deg)"></div> <div class="reveal"> <div class="revealleft"></div> <div class="revealright"></div> <button onclick="$('.revealleft,.revealright').toggleClass('revealed');Launch()">Reveal</button> <h1>A SURPRISE!</h1> <p> <img src="http://www.fndvisions.org/img/cutecat.jpg"></img>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis augue luctus, auctor eros at, commodo purus. Suspendisse potenti. Ut vel blandit nibh. Mauris luctus mollis turpis, at euismod quam fermentum iaculis. Donec non lectus vel purus porta ornare et vitae est. Sed porta luctus purus, at hendrerit lorem congue nec.</p> </div>

Answer 1

这样做的正确方法：

1- 让页面和脚本正常加载。

2- 使用适当的 UI（自定义 HTML 表单或提示）获取用户输入您可以在页面加载后显示输入表单

3- 根据用户的输入使用 javascript 操作 DOM。 在获得用户的输入后，您可以添加或操作所有元素。