Javascript dodawanie do listy

Odpowiedz Nowy wątek
2011-07-19 13:08
0

Witam, potrzebuję skryptu w js, który mierzy czas + są 2 grupy radiobutton, gdy zaznaczę radiobuttony i wcisnę button to zapisuje mi się w tabelce czas i wartości z radiobutton. Uporałem się już ze stoperem lecz nie wiem jak zrobić żeby kolejne czasy zapisywały się do jednej textarea. Również nie wiem jak zrobić żeby się zapisywały wartości z radiobutton do tej samej textarea. Chodzi mi żeby w polu tekstowym wyglądało to następująco np. "00:00:30.94,1,4".
@@edit

Już jest prawie wszystko, lecz brakuje małych poprawek. Czy da się zrobić żeby czas w funkcji showTimes(); był zapisywany nie po kliknięciu radiobutton tylko jak zaznaczę radio buttony i wcisnę button "Mark". Oraz jeżeli się da w ogóle żeby cała baza o zapisanych czasach była zapisywana w .txt do tego samego folderu gdzie znajduje się plik .html ?

 <html>
<head>
<title>Javascript Stopwatch</title>
<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;

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;
        document.clockform.m0.value = '';
}

function addMEM() {
    if (init>0)
    {
        var mC = document.clockform.m0;
        if(mC.value != '')
            mC.value = mC.value + "\n" + readout;
        else
            mC.value = readout;
    }
}

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;
        } 

}
var times = {};
window.onload=function() {
  var inpt = document.getElementsByTagName("input");
  for (var i=0,n=inpt.length;i<n;i++) {
    if (inpt[i].type=="radio") inpt[i].onclick=function() {
      times[this.id]=this.form.m0.value=this.form.clock.value;
    } 
  }
}

function showTimes() {
  var text ="";
  for (var o in times) text += o+":"+times[o]+"\n"
  if (text) alert(text)
} 

</script>
</head>
<body bgcolor=tan>
<form name=clockform>
<table bgcolor=cornsilk align=center cellpadding=5 border=1 bordercolor=burlywood><tr><td>
<table cellpadding=3 cellspacing=0 border=0 align=center>
<tr>
<td bgcolor=wheat><input name=clock value="00:00:00.00" style="text-align:center; width:174px; height:35px; font-size:24; font-weight:bold"></td>
<td valign=top bgcolor=wheat><input name=clearer type=button value="Reset" onclick="clearALL()"></td>
</tr>
<tr>
<td colspan=2 bgcolor=wheat>
<input name=starter type=button value="Start" style="width:97px; font-weight:bold" onclick="findTIME()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input name=marker type=button value="Mark" style="width:84px" onclick="addMEM()"><br><font style="font-size:9pt">&nbsp;</font></td>
</tr>

<tr><td>
<input type="radio" name="group1" id="G: 1" value="1"> 1<br>
<input type="radio" name="group1" id="G: 2" value="2"> 2<br>
<input type="radio" name="group1" id="G: 3" value="3"> 3<br>
<input type="radio" name="group1" id="G: 4" value="4"> 4<br>
<input type="radio" name="group1" id="G: 5" value="5"> 5<br>
<input type="radio" name="group1" id="G: 6" value="6"> 6<br>
</td>
<td>
<input type="radio" name="group2" id="A: 1" value="1"> 1<br>
<input type="radio" name="group2" id="A: 2" value="2"> 2<br>
<input type="radio" name="group2" id="A: 3" value="3"> 3<br>
<input type="radio" name="group2" id="A: 4" value="4"> 4<br>
<input type="radio" name="group2" id="A: 5" value="5"> 5<br>
<input type="radio" name="group2" id="A: 6" value="6"> 6<br>
</td>
</tr>
<tr><td colspan="2">
<textarea name="m0"  style="text-align:left; width:83px cols="40" rows="5" readonly="readonly">
</textarea>
<input type="button" onclick="showTimes()" value="show times">
</td>
</tr>
</table>
</form>

</body>
</html>
edytowany 2x, ostatnio: jooni, 2011-07-20 00:40
popraw kolorowanie składni, bo tak ciężko to czytać - sirkruk 2011-07-20 18:44

Pozostało 580 znaków

2011-07-20 12:20
0

Od razu powiem że sporo tego kodu i nie chce mi się go analizować, ale...
"był zapisywany nie po kliknięciu radiobutton tylko jak zaznaczę radio buttony i wcisnę button "Mark"" - tak, wykonaj akcję na onclick przycisku

Pozostało 580 znaków

2011-07-20 16:19
0
massther napisał(a)

Od razu powiem że sporo tego kodu i nie chce mi się go analizować, ale...
"był zapisywany nie po kliknięciu radiobutton tylko jak zaznaczę radio buttony i wcisnę button "Mark"" - tak, wykonaj akcję na onclick przycisku

To jest funkcja, która przypisana jest pod przycisk, który po kliknięciu w textarea zapisuje czas.

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

Po kliknięciu jakiegokolwiek radio buttona zapisuje jego wartość i czas jego wciśnięcia. Lecz ja potrzebuje żeby ta funkcja była kompatybilna z przyciskiem Mark, gdy zaznaczę 2 grupy radio buttonow i wcisnę przycisk Mark to dopiero wtedy się zapisze. Bo normalnie nie jest synchronizowany czas po między 1 a 2 zaznaczeniem radiobuttona.

var times = {}; 
window.onload=function() {
  var inpt = document.getElementsByTagName("input");
  for (var i=0,n=inpt.length;i<n;i++) {
    if (inpt[i].type=="radio") inpt[i].onclick=function() {
      times[this.id]=this.form.m0.value=this.form.clock.value;
    } 
  }
} 

Ta funkcja pokazuje co zostało zapisane poprzez kliknięcie radiobuttonów.

function showTimes() {
  var text ="";
  for (var o in times) text += o+":"+times[o]+"\n"
  if (text) alert(text)
} 

Potrzebuje jeszcze funkcji, która zapisze logi do pliku .txt

Pozostało 580 znaków

2011-07-20 17:55
0

Dobra skrypt już dopracowany do końca jeszcze jest jeden mały problem. W raz z kolegą nie wiem jak zrobić żeby się te logi zapisywały. Ma ktoś jakiś pomysł ?.

<html>
<head>
<title>Javascript Stopwatch</title>
<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 filePath = "/Users/ResetOfDirectoryPath/testWrite.txt";

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}

function uncheckedRadio() {

    var radio_1 = document.clockform.gName;
    var radio_2 = document.clockform.aName;       

    if(radio_1.length == undefined)
        radio_1.checked = false;
    else
        for(var i = 0; i < radio_1.length; i++)
            radio_1[i].checked = false;

    if(radio_2.length == undefined)
        radio_2.checked = false;
    else
        for(var i = 0; i < radio_2.length; i++)
            radio_2[i].checked = false;
}

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;
        document.clockform.m0.value = '';
        uncheckedRadio();
        nrGola = 1;
}

var nrGola = 1; 
function addMEM() {
    if (init>0)
    {
        var mC = document.clockform.m0;
        var gol = getCheckedValue(document.clockform.gName);
        var asy = getCheckedValue(document.clockform.aName);

        if(gol != '')
        {
            var mesOut = nrGola + " G: " + gol;

            if(asy != '')
            {
                if(asy == gol)
                {
                    alert('Error, asysta taki sam jak strzelca');
                    uncheckedRadio();
                    return false;
                }

                mesOut = mesOut + ", A: " + asy;
            }
            else
                mesOut = mesOut + ", A: brak";

            mesOut = mesOut + ", " + readout;

            if(mC.value != '')
                mC.value = mC.value + "\n" + mesOut;
            else
                mC.value = mesOut;
           nrGola++;     
           uncheckedRadio();              
        }
        else
            alert('Nie wybrano strzelcy');
    }
}

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;
        } 

}

/*
var times = {};
window.onload=function() {
  var inpt = document.getElementsByTagName("input");
  for (var i=0,n=inpt.length;i<n;i++) {
    if (inpt[i].type=="radio") inpt[i].onclick=function() {
        times[this.id]=this.form.m0.value=this.form.clock.value;

    } 
  }
}
*/

function showTimes() {

    var temp = document.clockform.m0.value;

    if(temp != '')
    {   
        uriContent = "data:text/plain;charset=utf-8," + encodeURIComponent(temp);
        newWindow=window.open(uriContent, 'txt');
    }
}

</script>
</head>
<body bgcolor=tan>
<form name="clockform">
<table bgcolor=cornsilk align=center cellpadding=5 border=1 bordercolor=burlywood><tr><td>
<table cellpadding=3 cellspacing=0 border=0 align=center>
<tr>
<td bgcolor=wheat><input name=clock value="00:00:00.00" style="text-align:center; width:174px; height:35px; font-size:24; font-weight:bold"></td>
<td valign=top bgcolor=wheat><input name=clearer type=button value="Reset" onclick="clearALL()"></td>
</tr>
<tr>
<td colspan=2 bgcolor=wheat>
<input name=starter type=button value="Start" style="width:97px; font-weight:bold" onclick="findTIME()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input name=marker type=button id ="dupa" value="Mark" style="width:84px" onclick="addMEM()"><br><font style="font-size:9pt">&nbsp;</font></td>
</tr>

<tr><td>
<input type="radio" name="gName" value="1" /> 1<br>
<input type="radio" name="gName" value="2" /> 2<br>
<input type="radio" name="gName" value="3" /> 3<br>
<input type="radio" name="gName" value="4" /> 4<br>
<input type="radio" name="gName" value="5" /> 5<br>
<input type="radio" name="gName" value="6" /> 6<br>
</td>
<td>
<input type="radio" name="aName" value="1" /> 1<br>
<input type="radio" name="aName" value="2" /> 2<br>
<input type="radio" name="aName" value="3" /> 3<br>
<input type="radio" name="aName" value="4" /> 4<br>
<input type="radio" name="aName" value="5" /> 5<br>
<input type="radio" name="aName" value="6" /> 6<br>
</td>
</tr>
<tr><td colspan="2">
<textarea name="m0"  style="text-align:left; width:83px cols="40" rows="5" readonly="readonly">
</textarea>
<input type="button" onclick="showTimes()" value="show times">
</td>
</tr>
</table>
</form>

</body>
</html>  

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0