倒计时后显示消息

时间:2017-05-19 04:50:08

标签: javascript jquery html

我目前使用javascript创建了一个倒数计时器。我想在倒计时结束后立即显示一条消息。那么,如果倒计时结束,我该如何显示该短信?

$(function(){
	
	var note = $('#note'),
		ts = new Date(2012, 0, 1),
		newYear = true;
	
	if((new Date()) > ts){
		// The new year is here! Count towards something else.
		// Notice the *1000 at the end - time must be in milliseconds
		ts = (new Date()).getTime() + 24*60*60*1000;
		newYear = false;
	}
		
	$('#countdown').countdown({
		timestamp	: ts,
		callback	: function(days, hours, minutes, seconds){
			
			var message = "";
			
			message += hours + " jam ";
			message += minutes + " minit" + " dan ";
			message += seconds + " saat" + " lagi!";
			
		
			note.html(message);
		}
	});
	
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
<div id="continer">
  <p><span id="timer"></span></p>
</div>  
        <center><img class="title" src="title.svg"></center>
        <img class="icon1" src="icon1.svg">
        <img class="icon2" src="icon2.svg">

		<div id="countdown"></div>

		<p id="note"></p>

        <!-- JavaScript includes -->
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="assets/countdown/jquery.countdown.js"></script>
		<script src="assets/js/script.js"></script>

    </body>
</html>

以下是我使用的代码

2 个答案:

答案 0 :(得分:1)

你可以使用setInterval,clearInterval并使用计数器来跟踪传递的秒数

function myFunction() {
     var seconds = 0;
     var finiteNumber = 300; // any number which can be calculated
     var interval = setInterval(function(){
         seconds++;
         if(seconds === finiteNumber) {
            console.log(seconds);
            clearInterval(interval )
          }
    }, 1000);
 }

答案 1 :(得分:0)

你应该使用setTimeout,因为它会在一次成功执行时自动停止。

function myFunction() {
var myTimeInSeconds = 600;
setTimeout(function(){
    console.log(seconds);
    alert('Success');
    document.getElementById("demo").innerHTML = "Success Message!";
}, myTimeInSeconds);
}