javascript - 如何延迟倒计时开始?

标签 javascript

我希望有一种方法可以在倒计时器开始之前设置延迟。显示第一条加载的消息一段时间,然后开始倒计时。 我只想使用 javascript,而不使用 jquery。 我已经尝试过 setTimeout 方法,但无法让它在这段代码中工作。

<!DOCTYPE html>
<html>
<head>

<style>

html{background-color: #444}
body{color: cyan;}
img{width: 100%; max-width: 256px; height: auto;}
#example3div{border: 1px solid; padding: 10px; border-radius: 50%; font-size:     22px; width: 80%; text-align: center;  margin: auto;}

</style>

<script type="text/javascript">

var containerID = "example3div";
var number = 6;
var timerID = setInterval("CountdownTimer()",1000);

function CountdownTimer() {     
    if(number > 1){
    number--;
    ReplaceContentInContainer(containerID,number);
    }
    else
    {
    clearInterval(timerID);
    ReplaceContentInContainer(containerID,'<img alt="GREATHOMES.US"     src="http://greathomes.us/images/html5.png" /><p>Hello. I love learning how to     code! (-_-)</p>');
}
}
</script>

<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
    var container = document.getElementById(id);
container.innerHTML = content;
}
</script>

</head>
<body>

<div id="example3div">Get ready for the countdown of your life!!!</div>

</body>
</html>

最佳答案

setTimeout 非常容易处理,其操作与现有的 setInterval 几乎相同,下面是一个示例:

setTimeout(CountdownTimer,2000);//call this after 2000ms

function CountdownTimer(){
   //your countdown timer code
}

请记住,setInterval 会延迟其内容的首次执行 - 等于其指定的时间间隔 - 调用它后不会立即触发

<小时/>

正如 @Deb 所说,你也有一个拼写错误 - 它是:

var timerID = setInterval(CountdownTimer,1000); //functions calls are not specified in string format

关于javascript - 如何延迟倒计时开始?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29887352/

相关文章:

javascript - 如何在多个地方使用 Photo Sphere Viewer 插件?

javascript - JavaScript 中的 @ 是做什么用的?

javascript - 通过嵌入式站点初始化 jQuery

javascript - 填充两个 DIV 元素之间的空白区域

Javascript const 关键字的使用方式不同

javascript - 部分渲染后的 Rails javascript 调用

javascript - 寻找用于使用 javascript 对项目进行分组的第一类和最后一类

javascript - 如何使用 javascript 在没有 id 的情况下向 html 标记添加 onclick 事件?

javascript - SortableJS 没有将我排序的待办事项列表保存在 localStorage 中

javascript - Captivate HTML5 Module Youtube 视频播放器状态