功能完成时加载按钮答案

【问题标题】：Load Button when Function is Finished功能完成时加载按钮
【发布时间】：2020-03-04 16:29:23
【问题描述】：

我在添加一个在 Java 脚本功能完成后应该变得可见的按钮时遇到问题。

代码来源：

"https://codepen.io/arcs/pen/rYXrNQ"

注意：代码显然不是我的，我对此没有任何功劳

阐述：

我将此代码移至一个简单的 html 页面，一切正常。完成注册表单后，将显示文本消息并稍有延迟。

我想要的是，在短信下方有一个带有超时功能（比短信长一点）的按钮，我可以从那里将用户导航到下一页。

再次，当这段代码的整个过程完成时，文本消息将被加载。我需要一个按钮来加载该文本下方。

我需要将用户移动到下一页的按钮，因此它应该包含一个链接并在同一选项卡中打开也可以添加。

对此的任何帮助将不胜感激。

【问题讨论】：

你想再去第一页吗？出现在最后一条消息下方的按钮，并再次将您带到第一页？
感谢您的关注。不，我需要将用户移动到下一页的按钮，因此它应该包含一个链接并可以添加在同一选项卡中打开。
在setTimeout(function() { h1.style.opacity = 1; ...之后添加另一个setTimeout()来加载按钮
嗨@ZohirSalak 我能够发现这一点，但如果你能给我一个完整的例子，我将不胜感激，因为我已经添加了许多变体，一切都以失败告终。
这很简单只是另一个setTimeout() setTimeout(function(){ the code that adds the button with the functionality },[ your delay ])

标签： javascript java html css

【解决方案1】：

首先创建一个带有下一页链接的“a”标签。确保你给它一个 javascript 部分的 id。

<a id="button" href="path_to/nextpage.html">Text for the button</a>

请添加基本的 CSS，例如位置、宽度和高度。将不透明度设置为 0，将指针事件设置为无。

//other properties
opacity:0;
pointer-events:none;
//other properties

完成此操作后，只需获取一个指向标签的变量并添加另一个 setTimeout 函数，该函数将不透明度设置为 1 并将指针事件设置为全部

var nextbtn = document.getElementById("button"); //or whatever id you gave the <a> tag
setTimeout(function() {
    nextbtn.style.opacity = "1";
    nextbtn.style.pointerEvents="auto"
  }, 500);// you can change the delay to suit your requirements

我希望这可以解决您的问题。祝你有美好的一天！

【讨论】：

既然有visibility，为什么还要使用opacity？
也可以。我使用不透明度，因为我发现它更容易操作。在我的另一个项目中，它涉及将 div 显示为过渡，因为我无法在不同的渐变之间过渡。我试过visibility 而不是opacity，但它不是工作。很可能是我的代码。但是，是的，两者都工作得很好。