怎么在页面显示5分钟的倒计时用java代码

Posted 2023-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么在页面显示5分钟的倒计时用java代码相关的知识，希望对你有一定的参考价值。

是web页面我想要明确的代码

参考技术A 给你一个javascript 5秒倒计时的例子。

<title>无标题文档</title>
<script type="text/javascript">
var totalTime=parseInt(6);
function countDown()

if(totalTime==0)
return;
else
totalTime=totalTime-1;
window.document.form1.timeText.value=totalTime;
setTimeout("countDown()",1000);

</script>

</head>

<body>
<form name="form1">
<input type="text" name="timeText" />
<input type="button" value="start" onclick="countDown();"
</form>
</body>
</html>

如果用java实现web 倒计时，那么就一种后果，不断的刷新页面。除非用ajax 或者 javascript 还有一个就是 applet。有啥问题可以hi我交流本回答被提问者采纳参考技术B web页面？用javascript吧

用 JavaScript 构建倒计时时钟

【中文标题】用 JavaScript 构建倒计时时钟【英文标题】：Building a countdown clock in JavaScript 【发布时间】：2011-10-18 20:02:05 【问题描述】：

我正在用 JavaScript 构建一个倒计时时钟，但无法完全按照我想要的方式格式化它。基本上，我有一个名为 totalTime 的变量，它最初设置为倒计时运行的总秒数。每一秒，这个数字减1，我把它转换成分秒显示在页面上。

让我感到困惑的是，我想在剩余分钟数上包含前导 0，但前提是 totalTime 的 initial 值为 600 (10:00) 或更大。所以，如果我将 totalTime 设置为 600，我希望倒计时显示 10:00、09:59、09:58 等（注意前导 0）；但如果我将 totalTime 设置为 300，我希望倒计时显示 5:00、4:59、4:58 等。

换句话说，前导 0 应该根据倒计时开始的时间量（totalTime 的初始值）出现，不是当前还剩下多少时间（当前值总时间）。我该怎么做？

编辑：这是我目前拥有的代码：http://jsfiddle.net/JFYaq/

// Get the countdown element
var countdown = document.getElementById("countdown");

// Set the total time in seconds
var totalTime = 600;

// Every second...
var interval = setInterval(function()
    // Update the time remaining
    updateTime();

    // If time runs out, stop the countdown
    if(totalTime == -1)
        clearInterval(interval);
        return;
    
, 1000);

// Display the countdown
function displayTime()
    // Determine the number of minutes and seconds remaining
    var minutes = Math.floor(totalTime / 60);
    var seconds = totalTime % 60;

    // Add a leading 0 to the number of seconds remaining if it's less than 10
    if (seconds < 10)
        seconds = "0" + seconds;
    

    // Split the number of minutes into two strings
    var minutesString = minutes + "";
    var minutesChunks = minutesString.split("");

    // Split the number of seconds into two strings
    var secondsString = seconds + "";
    var secondsChunks = secondsString.split("");

    // If the total time is 10 minutes or greater...
    if (totalTime >= 600)
        // Add a leading 0 to the number of minutes remaining if it's less than 10
        if (minutes < 10)
            minutes = "0" + minutes;
        
        // Display the time remaining
        countdown.innerHTML = "<span>" + minutesChunks[0] + "</span>" + "<span>" + minutesChunks[1] + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>";
    
    // If the total time is less than 10 minutes...
    else 
        // Display the time remaining without a leading 0 on the number of minutes
        countdown.innerHTML = "<span>" + minutes + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>"
            


// Update the time remaining
function updateTime()
    displayTime();
    totalTime--;


// Start the countdown immediately on the initial pageload
updateTime();

【问题讨论】：

你能把你写的代码贴出来吗？更新了指向 JSFiddle 的链接（由于某种原因，我无法在帖子中正确格式化代码）。 【参考方案1】：

小提琴：http://jsfiddle.net/JFYaq/1/

解释：

必要时添加零前缀，可以使用以下函数：

function pad(n)
    return n > 9 ? "" + n : "0" + n;

注意"" + n。 pad(n) 函数将始终返回一个字符串，这对于应用字符串方法很有用。

应始终在第二个计数器处使用填充。对于分钟计数器，将原始时间存储在一个变量中，并检查它是否超过600：

var original = 600;
function padMinute(n)
    return original >= 600 && n < 9 ? "0" + n : "" + n;

与您的代码相关：

function displayTime()
    var minutes = Math.floor(totalTime / 60);
    var seconds = totalTime % 60;

    minutes = "<span>" + padMinute(minutes).split("").join("</span><span>") + "</span>";
    seconds = "<span>" + pad(seconds).split("").join("</span><span>") + "</span>";

    countdown.innerHTML = minutes + ":" + seconds;

.split("") 将字符串拆分为字符列表。 .join("</span><span>") 用于连接字符串集，在每个字符之间添加</span><span>。整个结果与<span> 和</span> 结合在一起，这样最终的HTML 才有效。

执行模型：

1. padMinute(minutes)                       "09"
2.             .split("")                   Array( "0" , "9" )
3.                   .join("</span><span>")
                                            "0</span><span>9"
4.                "<span>" + .. + "</span>" "<span>0</span><span>9<span>"

【讨论】：

太棒了！非常感谢。在您的代码中，当您说var original = totalTime; 时，original 的值为什么不像 totalTime 那样每秒减少 1？我很好奇为什么会这样。在 JavaScript 中，原始值（字符串、数字、布尔值、null 和 undefiend）在另一个变量指向保存它的变量时被复制。所有其他对象都通过引用传递。所以，var a=b:2, c=a; a.b=5; alert(c.b) 将显示5。

以上是关于怎么在页面显示5分钟的倒计时用java代码的主要内容，如果未能解决你的问题，请参考以下文章

在html页面加一个倒计时90分钟代码怎么写

用java编一个简单的倒计时表

怎样用51单片机实现累加计时和倒计时，并用六个共阴极数码管显示出来。用两个按键分别切换。

JS 5秒倒计时的代码怎么写？时间要实时显示在屏幕上的。

vb的进度条怎么用?

jquery实现倒计时效果

怎么在页面显示5分钟的倒计时 用java代码

用 JavaScript 构建倒计时时钟

怎么在页面显示5分钟的倒计时用java代码