Question

我有此代码，并且运行良好。这只是一个简单的递增计时器，它将在页面加载后自动启动，也可以随意暂停。

但是，我希望它在计时器达到3分钟时将时间字体颜色更改为黄色，然后在5分钟后变为红色。

<html>

<head>

<script type="text/javascript">
    var flagclock = 0;
    var flagstop = 1;
    var stoptime = 0;
    var currenttime;
    var splitdate = '';
    var output;
    var clock;

function startstop()
    {
    var startstop = document.getElementById('startstoptimer');
    var startdate = new Date();
    var starttime = startdate.getTime();
    if(flagclock==0)
        {
        startstop.value = 'Pause';
        flagclock = 1;
        counter(starttime);
        }
    else
        {
        startstop.value = 'Start';
        flagclock = 0;
        flagstop = 1;
        splitdate = '';
        }
    }

function counter(starttime)
    {
    output = document.getElementById('output');
    clock = document.getElementById('clock');
    currenttime = new Date();
    var timediff = currenttime.getTime() - starttime;
    if(flagstop == 1)
        {
        timediff = timediff + stoptime
        }
    if(flagclock == 1)
        {
        clock.value = formattime(timediff,'');
        refresh = setTimeout('counter(' + starttime + ');',10);
        }
    else
        {
        window.clearTimeout(refresh);
        stoptime = timediff;
        }
    }

function formattime(rawtime,roundtype)
    {
    if(roundtype == 'round')
        {
        var ds = Math.round(rawtime/100) + '';
        }
    else
        {
        var ds = Math.floor(rawtime/100) + '';      
        }
    var sec = Math.floor(rawtime/1000);
    var min = Math.floor(rawtime/60000);
    ds = ds.charAt(ds.length - 1);
    if(min >= 60)
        {
        startstop();
        }
    sec = sec - 60 * min + '';
    if(sec.charAt(sec.length - 2) != '')
        {
        sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
        }
    else
        {
        sec = 0 + sec.charAt(sec.length - 1);
        }   
    min = min + '';
    if(min.charAt(min.length - 2) != '')
        {
        min = min.charAt(min.length - 2)+min.charAt(min.length - 1);
        }
    else
        {
        min = 0 + min.charAt(min.length - 1);
        }
    return min + ':' + sec;
    }
</script>

<style type="text/css">

*

    {

    margin: 0;

    padding: 0;

    }



input, textarea

    {

    width: 100px;

    font: normal 10pt verdana;

    }

</style>

</head>

<body onload="startstop();">

<input id="clock" type="text" value="00:00" style="text-align: center;background-color:white;border:1px solid gray;font-weight:bold;font-size:14pt;" readonly><br>

<input id="startstoptimer" type="button" value="Start" onClick="startstop();" style="font-weight:bold"><br>


</body>

</html>

非常感谢您！

Lorem ipsum dolor坐下，奉献己任，sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in volttable velit esse cillum dolore eu fugiat nulla pariatur。不会出现意外的圣人，反而会在犯规的情况下动手动手。

注意：我仅在上面添加了lorem ipsum，因为除非添加更多单词，否则它不会保存我的问题。我相信我已经解释了我所需要的，并且已经不再考虑添加了，所以我只写了那个lorem的东西。

根据时间更改字体颜色

0 个答案: