在不同的页面元素上运行多个 settimeout 或 showit 函数

Question

注意：我不是开发人员。更像是一个业余爱好者（阅读 n00b）。 我已经尝试寻找这个问题的答案，但到目前为止还没有找到任何可以为这个特定场景提供答案的东西。

我知道这是相对基本的，但我正在尝试创建一个包含三个隐藏元素的页面，这些元素在时间延迟或鼠标单击后会显示出来。我正在努力让所有三个元素在同一页面上运行。

必填：
元素 1：页面加载后 10 秒显示隐藏图像
元素 2：页面加载后 10 分钟显示隐藏的 div
元素 3：按钮图像在元素 2 内，点击时会显示另一个隐藏的 div

我正在使用以下 setTimeout 函数来显示元素 1，但在此之后我无法运行第二个 setTimeout 命令。

<script language="javascript" type="text/javascript">
var pop=10;
function showIt() {
document.getElementById("hid").style.display = "block";
}
setTimeout(showIt, 10000);
</script>

我尝试为将元素 ID 更改为“hid2”的第二个元素重复此代码，但它不会运行。是否需要使用 cleartimeout 函数来结束第一个 settimeout？

然后我需要一些元素 3 的代码，以便在元素 2 之后通过鼠标单击运行。

让所有 JS 的三个部分完美地结合在一起似乎超出了我的能力范围。 非常感谢您的帮助！

Answer 1

我相信这就是您的要求。

<img id="hid" src="img/darkred.jpg" style="width: 20px; display: none;"/>
<div id="hid2" style="display: none;">div 2
    <input type="button" value="show div3"/>
</div>
<div id="hid3" style="display: none;">div 3</div>


function showIt(hid) {
    document.getElementById(hid).style.display = "block";
}

function revealEl(id, delay){
    setTimeout(function(){
        showIt(id);
    }, delay);
}

revealEl("hid", 4000);
revealEl("hid2", 6000);

$("#hid2 input"").on("click", function(){
    showIt("hid3");
});