1 универсальная функц. для параллельного запуска независимых счётчиков

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем parallax, 16 авг 2007.

Статус темы:
Закрыта.
  1. parallax

    parallax Гость

    Теоретически простого хочу: на странице есть множество одинаковых форм, в каждой из них есть поле для ввода начального значения и кнопочка для запуска инкрементного счётчика. Для трёх форм я ещё расклонирую одну и ту же функцию, только индексы добавлю к названиям функций, объектам, переменным и ко всему, к чему необходимо. А как быть, если нужно запустить полсотни счётчиков, причём кликая по кнопкам "Запустить" поочерёдно, но не плодя однотипные функции, а сделав всё одной универсальной? Да так, чтобы не получилось лжерешения вроде обслуживания всех счётчиков одной функцией с setTimeout'ом (или setInterval'ом), которая будет панически скакать в цикле с перебором всех полей и обновлять значение по очереди! По всей видимости, необходимо вводить prototype, constructor, new и т. п., я бы даже сказал, что именно это меня и интересует, а не завязка на функцию времени (new Date()).getTime(), постановка в очередь времён запуска каждого из событий и последовательная обработка всей очереди счётчиков одной рефреш-функцией с setTimeout'ом или setInterval'ом. Если нельзя запрототипить в принципе, подскажите другие способы размножить независимые рефреш-функции для каждого элемента (кроме runtime-генерации рефреш-функций на лету с помощью JS с подстановкой индексов — это также не то, что мне нужно).

    Вот пример ожидаемой работы скрипта после унификации всех его однотипных функций (здесь скрипт раздут повторяющимися однотипными функциями):

    <HTML>
    <HEAD>
    <TITLE>Multicounter</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1251">
    <STYLE>
    BODY, TABLE, TR, TH, TD, INPUT
    {
    font-family:Tahoma;
    font-size: 14px;
    color:#2A486C
    }

    TABLE
    {
    border:solid silver 3px;
    width:172px;
    }

    TR
    {
    text-align: center
    }

    TD
    {
    color: white;
    background-color: #666777;
    border: solid silver 1px;
    }

    TH
    {
    font-size: 18px;
    color: red;
    background-color: #DFDFF1;
    }

    INPUT
    {
    border: solid #dddddd 1px;
    width: 24px;
    text-align: center
    }

    .tbl
    {
    border-collapse:collapse
    }

    .send
    {
    border: solid #98aa89 2px;
    font-weight:bold;
    color: white;
    width: 100%;
    height: 27px
    }

    .parameters
    {
    font-weight:bold;
    background-color: #888888;
    width: 70%;
    text-align: left
    }
    </STYLE>
    <script>

    function counter1(theForm) {
    function theFormElementAccess(field) {
    return theForm.elements[field+theForm.id.match(/\d/)].value
    }
    this.theForm = theForm
    if(!document.getElementById("results1").innerHTML.match(/\d+/))
    this.parameter1 = theFormElementAccess('parameter')
    document.getElementById("results1").innerHTML = this.parameter1++
    setTimeout("counter1(this.theForm)",330)
    }

    function counter2(theForm) {
    function theFormElementAccess(field) {
    return theForm.elements[field+theForm.id.match(/\d/)].value
    }
    this.theForm = theForm
    if(!document.getElementById("results2").innerHTML.match(/\d+/))
    this.parameter2 = theFormElementAccess('parameter')
    document.getElementById("results2").innerHTML = this.parameter2++
    setTimeout("counter2(this.theForm)",330)
    }

    function counter3(theForm) {
    function theFormElementAccess(field) {
    return theForm.elements[field+theForm.id.match(/\d/)].value
    }
    this.theForm = theForm
    if(!document.getElementById("results3").innerHTML.match(/\d+/))
    this.parameter3 = theFormElementAccess('parameter')
    document.getElementById("results3").innerHTML = this.parameter3++
    setTimeout("counter3(this.theForm)",330)
    }
    </SCRIPT>
    </HEAD>

    <BODY>
    <TABLE style="border:none; background-color:#FFFFFF;" cellspacing=7 cellpadding=0>
    <TR>
    <TD>
    <TABLE class="tbl">
    <FORM id="form1">
    <TR>
    <TD class=parameters>value1:</TD>
    <TD><INPUT id="parameter1" value="17"></TD>
    </TR>
    <TR>
    <TD><INPUT class=send onclick="counter1(this.form)" type="button" value="Send"></TD>
    </TR>
    </FORM>
    </TABLE>
    </TD>
    <TD>
    <TABLE class="tbl">
    <FORM id="form2">
    <TR>
    <TD class=parameters>value2:</TD>
    <TD><INPUT id="parameter2" value="43"></TD></TR>
    <TR>
    <TD><INPUT class=send onclick="counter2(this.form)" type="button" value="Send"></TD>
    </TR>
    </FORM>
    </TABLE>
    </TD>
    <TD>
    <TABLE class="tbl">
    <FORM id="form3">
    <TR>
    <TD class=parameters>value3:</TD>
    <TD><INPUT id="parameter3" value="78"></TD></TR>
    <TR>
    <TD><INPUT class=send onclick="counter3(this.form)" type="button" value="Send"></TD>
    </TR>
    </FORM>
    </TABLE>
    </TD>
    </TR>
    <TR>
    <TH id="results1"> </TH>
    <TH id="results2"> </TH>
    <TH id="results3"> </TH>
    </TR>
    </TABLE>

    </BODY>
    </HTML>

    А вот то, к чему я стремлюсь, в то время как пример не работает должным образом, а бросает приращение предыдущего счётчика и набрасывается на только что запущенный, будто и не было никакой прототипизации:

    <HEAD>
    <script>
    function theCounter(){}

    function counter(theForm) {
    function theFormElementAccess(field) {
    return theForm.elements[field+theForm.id.match(/\d/)].value
    }
    this.theForm = theForm
    if(!document.getElementById("results"+theForm.id.match(/\d/)).innerHTML.match(/\d+/))
    this.parameter = theFormElementAccess('parameter')
    document.getElementById("results"+theForm.id.match(/\d/)).innerHTML = this.parameter++
    setTimeout("counter(this.theForm)",330)
    }

    theCounter.prototype.toString = counter(theForm)
    </SCRIPT>
    </HEAD>

    <BODY>
    <TABLE style="border:none; background-color:#FFFFFF;" cellspacing=7 cellpadding=0>
    <TR>
    <TD>
    <TABLE class="tbl">
    <FORM id="form1">
    <TR>
    <TD class=parameters>value1:</TD>
    <TD><INPUT id="parameter1" value="17"></TD>
    </TR>
    <TR>
    <TD><INPUT class=send onclick="counter(this.form)" type="button" value="Send"></TD>
    </TR>
    </FORM>
    </TABLE>
    </TD>
    <TD>
    <TABLE class="tbl">
    <FORM id="form2">
    <TR>
    <TD class=parameters>value2:</TD>
    <TD><INPUT id="parameter2" value="43"></TD></TR>
    <TR>
    <TD><INPUT class=send onclick="counter(this.form)" type="button" value="Send"></TD>
    </TR>
    </FORM>
    </TABLE>
    </TD>
    <TD>
    <TABLE class="tbl">
    <FORM id="form3">
    <TR>
    <TD class=parameters>value3:</TD>
    <TD><INPUT id="parameter3" value="78"></TD></TR>
    <TR>
    <TD><INPUT class=send onclick="counter(this.form)" type="button" value="Send"></TD>
    </TR>
    </FORM>
    </TABLE>
    </TD>
    </TR>
    <TR>
    <TH id="results1"> </TH>
    <TH id="results2"> </TH>
    <TH id="results3"> </TH>
    </TR>
    </TABLE>

    </BODY>
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей