Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помощь с секундомером (https://javascript.ru/forum/misc/24148-pomoshh-s-sekundomerom.html)

kuzkuz 19.12.2011 11:21
Помощь с секундомером
 
Нашел интересный скрипт, как раз то что мне нужно, но в скрипте косяк при нажатии пауза он секундомер не останавливается, а продолжает отсчитывать секунды.

вот сам код:
<html>
<head>
  <script language="javascript">
var base = 60;
var clocktimer,dateObj,dh,dm,ds,ms;
var readout='';
var h=1;
var m=1;
var tm=1;
var s=0;
var ts=0;
var ms=0;
var show=true;
var init=0;
var mPLUS=new Array(
'm0',
'm1',
'm2',
'm3',
'm4',
'm5',
'm6',
'm7',
'm8',
'm9'
);
var ii=0;
function clearALL() {
clearTimeout(clocktimer);
h=1;m=1;tm=1;s=0;ts=0;ms=0;
init=0;show=true;
readout='00:00:00.00';
document.clockform.clock.value=readout;
var CF = document.clockform;
for (ij=0;ij<=9;ij++) { CF[mPLUS[ij]].value = ''; }
ii = 0;
}
function addMEM() {
if (init>0) {
var CF = document.clockform;
CF[mPLUS[ii]].value = readout;
if (ii==9) { ii = 0; } else { ii++; }
}
}
function startTIME() { var cdateObj = new Date();
var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000);
if (t>999) { s++; }
if (s>=(m*base)) {
ts=0;
m++;
} else {
ts=parseInt((ms/100)+s);
if(ts>=base) { ts=ts-((m-1)*base); }
}
if (m>(h*base)) {
tm=1;
h++;
} else {
tm=parseInt((ms/100)+m);
if(tm>=base) { tm=tm-((h-1)*base); }
}
ms = Math.round(t/10);
if (ms>99) {ms=0;}
if (ms==0) {ms='00';}
if (ms>0&&ms<=9) { ms = '0'+ms; }
if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; }
dm=tm-1;
if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; }
dh=h-1;
if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; }
readout = dh + ':' + dm + ':' + ds + '.' + ms;
if (show==true) { document.clockform.clock.value = readout; }
clocktimer = setTimeout("startTIME()",1);
}
function findTIME() {
if (init==0) {
dateObj = new Date();
startTIME();
init=1;
} else {
if(show==true) {
show=false;
} else {
show=true; }
}
}
  </script>
  <title></title>
</head>
<body>
<form name="clockform">
  <table border="0" cellpadding="2" cellspacing="0">
    <tbody>
      <tr>
        <td><input name="clearer" value=" reset "
 onclick="clearALL()" type="button"></td>
        <td><input name="clock" size="12"
 value="00:00:00.00"></td>
      </tr>
      <tr>
        <td><input name="marker" value=" m + "
 onclick="addMEM()" type="button"></td>
        <td><input name="starter" value="start / pause"
 onclick="findTIME()" type="button"></td>
      </tr>
      <tr>
        <td><b>m 0</b></td>
        <td><input name="m0" size="12"></td>
      </tr>
      <tr>
        <td><b>m 1</b></td>
        <td><input name="m1" size="12"></td>
      </tr>
      <tr>
        <td><b>m 2</b></td>
        <td><input name="m2" size="12"></td>
      </tr>
      <tr>
        <td><b>m 3</b></td>
        <td><input name="m3" size="12"></td>
      </tr>
      <tr>
        <td><b>m 4</b></td>
        <td><input name="m4" size="12"></td>
      </tr>
      <tr>
        <td><b>m 5</b></td>
        <td><input name="m5" size="12"></td>
      </tr>
      <tr>
        <td><b>m 6</b></td>
        <td><input name="m6" size="12"></td>
      </tr>
      <tr>
        <td><b>m 7</b></td>
        <td><input name="m7" size="12"></td>
      </tr>
      <tr>
        <td><b>m 8</b></td>
        <td><input name="m8" size="12"></td>
      </tr>
      <tr>
        <td><b>m 9</b></td>
        <td><input name="m9" size="12"></td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html>


Подскажите как справиться с данной проблемой?

рони 19.12.2011 13:43
Цитата:
Сообщение от kuzkuz
Подскажите как справиться с данной проблемой?
Вникать!!!...или хотябы поискать разницу между тем что было и этим вариантом.
<html>
<head>
  <script language="javascript">
var base = 60;
var clocktimer, dateObj, dh, dm, ds, ms;
var readout = '';
var h = 1;
var m = 1;
var tm = 1;
var s = 0;
var ts = 0;
var ms = 0;
var show = true;
var init = 0;
var mPLUS = new Array('m0', 'm1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9');
var ii = 0;
var pause = 0;

function clearALL() {
    clearTimeout(clocktimer);
    h = 1;
    m = 1;
    tm = 1;
    s = 0;
    ts = 0;
    ms = 0;
    init = 0;
    show = true;
    readout = '00:00:00.00';
    document.clockform.clock.value = readout;
    var CF = document.clockform;
    for (ij = 0; ij <= 9; ij++) {
        CF[mPLUS[ij]].value = '';
    }
    ii = 0;
}

function addMEM() {
    if (init > 0) {
        var CF = document.clockform;
        CF[mPLUS[ii]].value = readout;
        if (ii == 9) {
            ii = 0;
        } else {
            ii++;
        }
    }
}

function startTIME() {
    var cdateObj = new Date();
    var t = (cdateObj.getTime() - dateObj.getTime()) - (s * 1000);
    if (t > 999) {
        s++;
    }
    if (s >= (m * base)) {
        ts = 0;
        m++;
    } else {
        ts = parseInt((ms / 100) + s);
        if (ts >= base) {
            ts = ts - ((m - 1) * base);
        }
    }
    if (m > (h * base)) {
        tm = 1;
        h++;
    } else {
        tm = parseInt((ms / 100) + m);
        if (tm >= base) {
            tm = tm - ((h - 1) * base);
        }
    }
    ms = Math.round(t / 10);
    if (ms > 99) {
        ms = 0;
    }
    if (ms == 0) {
        ms = '00';
    }
    if (ms > 0 && ms <= 9) {
        ms = '0' + ms;
    }
    if (ts > 0) {
        ds = ts;
        if (ts < 10) {
            ds = '0' + ts;
        }
    } else {
        ds = '00';
    }
    dm = tm - 1;
    if (dm > 0) {
        if (dm < 10) {
            dm = '0' + dm;
        }
    } else {
        dm = '00';
    }
    dh = h - 1;
    if (dh > 0) {
        if (dh < 10) {
            dh = '0' + dh;
        }
    } else {
        dh = '00';
    }
    readout = dh + ':' + dm + ':' + ds + '.' + ms;
    document.clockform.clock.value = readout;
    if (show == true) {
        clocktimer = setTimeout("startTIME()", 10);
    }
}

function findTIME() {
    if (init == 0) {
        dateObj = new Date();
        startTIME();
        init = 1;
    } else {
        if (show == true) {
            show = false;
            pause = new Date();
        } else {
            show = true;
            dateObj = new Date(dateObj.getTime() + (new Date()).getTime() - pause.getTime());
            startTIME();
        }
    }
}
  </script>
  <title></title>
</head>
<body>
<form name="clockform">
  <table border="0" cellpadding="2" cellspacing="0">
    <tbody>
      <tr>
        <td><input name="clearer" value=" reset "
 onclick="clearALL()" type="button"></td>
        <td><input name="clock" size="12"
 value="00:00:00.00"></td>
      </tr>
      <tr>
        <td><input name="marker" value=" m + "
 onclick="addMEM()" type="button"></td>
        <td><input name="starter" value="start / pause"
 onclick="findTIME()" type="button"></td>
      </tr>
      <tr>
        <td><b>m 0</b></td>
        <td><input name="m0" size="12"></td>
      </tr>
      <tr>
        <td><b>m 1</b></td>
        <td><input name="m1" size="12"></td>
      </tr>
      <tr>
        <td><b>m 2</b></td>
        <td><input name="m2" size="12"></td>
      </tr>
      <tr>
        <td><b>m 3</b></td>
        <td><input name="m3" size="12"></td>
      </tr>
      <tr>
        <td><b>m 4</b></td>
        <td><input name="m4" size="12"></td>
      </tr>
      <tr>
        <td><b>m 5</b></td>
        <td><input name="m5" size="12"></td>
      </tr>
      <tr>
        <td><b>m 6</b></td>
        <td><input name="m6" size="12"></td>
      </tr>
      <tr>
        <td><b>m 7</b></td>
        <td><input name="m7" size="12"></td>
      </tr>
      <tr>
        <td><b>m 8</b></td>
        <td><input name="m8" size="12"></td>
      </tr>
      <tr>
        <td><b>m 9</b></td>
        <td><input name="m9" size="12"></td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html>

nerv_ 19.12.2011 15:55
рони, я даже смотреть не стал. Автор создает уже третью аналогичную тему.
Обратный таймер
Таймер нужна помощь

рони 23.12.2011 17:32
Вариант таймера ... немного его перекомпоновал ... добавил клавиши клавиатуры как в варианте FINoM, Старт/пауза (Пробел или Enter) Новый вариант (Esc) ... основное достоинство выводит точно (максимально возможное в данном коде) время при нажатии на паузу или кнопку M+ независимо от выставленной паузы в setTimeout("startTIME()", 50) ... можно следовательно снизить нагрузку на процессор точность не потеряется ...
<html>
<head>
  <script language="javascript">
var clocktimer, dateObj, dh, dm, ds, ms, readout = "",
    show = !0,
    init = 0,
    ii = 0,
    pause = 0;

function clearALL() {
    clearTimeout(clocktimer);
    init = 0;
    readout = "00:00:00.00";
    document.clockform.clock.value = readout;
    var a = document.clockform;
    for (ij = 0; 10 > ij; ij++) a["m" + ij].value = "";
    ii = 0
}
function addMEM() {
    if (!0 == show ) clearTimeout(clocktimer), startTIME(), document.clockform["m" + ii].value = readout, ii = ++ii % 10
}
function startTIME() {
    var a = new Date((new Date).getTime() - dateObj.getTime());
    dh = ("0" + a.getUTCHours()).replace(/.+?(\d{2})$/, "$1");
    dm = ("0" + a.getUTCMinutes()).replace(/.+?(\d{2})$/, "$1");
    ds = ("0" + a.getUTCSeconds()).replace(/.+?(\d{2})$/, "$1");
    ms = ("0" + (a.getUTCMilliseconds() / 5 >> 1)).replace(/.+?(\d{2})$/, "$1");
    readout = dh + ":" + dm + ":" + ds + "." + ms;
    document.clockform.clock.value = readout;
    !0 == show && (clocktimer = setTimeout("startTIME()", 50))
}
function findTIME() {
    0 == init ? (dateObj = new Date, init = 1, show = !0) :
    !0 == show ? (clearTimeout(clocktimer), show = !1, pause = new Date) :
    (show = !0, dateObj = new Date(dateObj.getTime() + (new Date).getTime() - pause.getTime()));
    startTIME()
};
document.onkeypress = function (a) {
    a = window.event ? window.event.keyCode : a.which;
    (13 == a || 32 == a) && findTIME();
    27 == a && clearALL()
};
  </script>
  <title></title>
</head>
<body>
<form name="clockform">
  <table border="0" cellpadding="2" cellspacing="0">
    <tbody>
      <tr>
        <td><input name="clearer" value=" reset "
 onclick="clearALL()" type="button"></td>
        <td><input name="clock" size="12"
 value="00:00:00.00"></td>
      </tr>
      <tr>
        <td><input name="marker" value=" m + "
 onclick="addMEM()" type="button"></td>
        <td><input name="starter" value="start / pause"
 onclick="findTIME()" type="button"></td>
      </tr>
      <tr>
        <td><b>m 0</b></td>
        <td><input name="m0" size="12"></td>
      </tr>
      <tr>
        <td><b>m 1</b></td>
        <td><input name="m1" size="12"></td>
      </tr>
      <tr>
        <td><b>m 2</b></td>
        <td><input name="m2" size="12"></td>
      </tr>
      <tr>
        <td><b>m 3</b></td>
        <td><input name="m3" size="12"></td>
      </tr>
      <tr>
        <td><b>m 4</b></td>
        <td><input name="m4" size="12"></td>
      </tr>
      <tr>
        <td><b>m 5</b></td>
        <td><input name="m5" size="12"></td>
      </tr>
      <tr>
        <td><b>m 6</b></td>
        <td><input name="m6" size="12"></td>
      </tr>
      <tr>
        <td><b>m 7</b></td>
        <td><input name="m7" size="12"></td>
      </tr>
      <tr>
        <td><b>m 8</b></td>
        <td><input name="m8" size="12"></td>
      </tr>
      <tr>
        <td><b>m 9</b></td>
        <td><input name="m9" size="12"></td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html>


Часовой пояс GMT +3, время: 09:53.