javascript倒计时脚本

JavasSript Countdown Script

本文关键字：脚本 倒计时 javascript      更新时间：2023-09-26

我需要一个简单的JavaScript倒计时脚本为测验准备。

  1. 开始测试页面加载，倒计时开始30分钟
  2. 30分钟后显示警告信息给用户。

下面是我使用的代码，但在30分钟后它递减…

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
var mins = 30;

var secs = mins * 60;
function countdown() {
    setTimeout('Decrement()',1000);
}
function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
        setTimeout('Decrement()',1000);
    }
}
function getminutes() {
    mins = Math.floor(secs / 60);
    return mins;
}
function getseconds() {
    return secs-Math.round(mins *60);
}
</script>
</head>
<body>
<div id="timer">
    This is only valid for the next <input id="minutes" type="text" style="width: 14px; border: none; background-color:none; font-size: 16px; font-weight: bold;">  minutes and <input id="seconds" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;"> seconds.
</div>
<script>
countdown();
</script>

简单的谷歌给了我很多例子和lib文件

http://flipclockjs.com/

https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer

http://www.gieson.com/Library/projects/utilities/countdown/

http://blog.smalldo.gs/2013/12/create-simple-countdown/

更正你的js.

var mins = 1;
var secs = mins * 60;
function Decrement() {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    if (seconds < 59) {
        seconds.value = secs;
    } else {
        minutes.value = getminutes();
        seconds.value = getseconds();
    }
    secs--;
    if (secs <= 0 && mins <= 0) {
        alert(11);
        return;
    }
    setTimeout(function () {
        Decrement()
    }, 1000);
}
function getminutes() {
    mins = Math.floor(secs / 60);
    return mins;
}
function getseconds() {
    return secs - Math.round(mins * 60);
}
function countdown() {
    setTimeout(function () {
        Decrement()
    }, 1000);
}
countdown();

小提琴

干杯! !

可以使用setTimeout()函数

setTimeout(function()
{
    alert("Hello");
},3000);

这将显示一个弹出对话框与'Hello'后3秒。3000指的是毫秒，所以只需将30分钟转换为毫秒。

一旦达到时间限制，花括号中的代码将执行。

http://www.w3schools.com/jsref/met_win_settimeout.asp

只需使用setInterval方法并将其设置为1000。(1秒)

每秒递增一个全局值

var timePassed =0;
...
timePassed++;

如果你达到1800秒，那就结束了:)

这又不是什么高深的学问，你可以自己动手:)

PS:在localStorage或cookie中存储时间，如果您需要刷新页面或进入下一页

相关文章：