Απορια σε καποια ασκηση με javascript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
fantomas
Δημοσιεύσεις: 38
Εγγραφή: 24 Απρ 2010 15:45

Απορια σε καποια ασκηση με javascript

Δημοσίευση από fantomas » 07 Ιουν 2012 13:24

Θελω να φτιάξω μια σελίδα HTML/Javascript η οποία να κανει τα εξης:
Η σελίδα αρχικά θα εμφανίζει ένα κουμπί «Έναρξη» και ένα κενό κίτρινο πίνακα 5X5.Ο πίνακας προϋπάρχει στην σελίδα σαν κώδικας HTML. (Το εκανα αυτο!!!)
Όταν ο χρήστης πατάει το κουμπί «Έναρξη» θα γίνονται τα παρακάτω:
Το κουμπί «Έναρξη» θα απενεργοποιείται. (Το εκανα αυτο!!!)
Τα κελιά του πίνακα θα γεμίζουν με τυχαίους αριθμούς 0-9 και θα χρωματίζονται επίσης τυχαία με πράσινο ή κόκκινο φόντο. (Εδω κολλαω!)
Τα παρακατω θα τα προσπαθησω στην συνεχεια!!!!
------------------------------------------------------------
Όταν ο χρήστης κάνει κλικ σε κάποιο κελί, αν το κελί είναι κόκκινο τότε ο αριθμός στο κελί θα μειώνετε κατά ένα αλλιώς θα αυξάνετε κατά ένα. Παράλληλα, θα αλλάζει και το χρώμα του κελιού στο αντίθετο. (πχ. Αν ήταν 3 και κόκκινο τότε θα γίνετε 2 και πράσινο).
Όταν ο χρήστης κάνει κλικ σε 10 κελιά θα συμβαίνουν τα παρακάτω:
Το κουμπί «Έναρξη» θα ενεργοποιείται.
Εμφανίζεται ένα μήνυμα με τον μέσο όρο από τους αριθμούς που περιέχονταν στα κελιά που έκανε κλικ ο χρήστης. (πριν την αλλαγή τους)
--------------------------------------------------------------
Θα ανεβασω και τον κωδικα μου για να μου πει καποιος/α αν το προσεγγιζω σωστα! Ευχαριστω....

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Απορια σε καποια ασκηση με javascript

Δημοσίευση από Christianago » 07 Ιουν 2012 16:40

Την προσεγγιση σου δε μας την ειπες, απλα ειπες τι θελεις να κανεις.
Ανεβασε τον κωδικα σου να δουμε.

fantomas
Δημοσιεύσεις: 38
Εγγραφή: 24 Απρ 2010 15:45

Απορια σε καποια ασκηση με javascript

Δημοσίευση από fantomas » 08 Ιουν 2012 18:01

<html>
<head>
<script >


var counter=0;
var sum=0;
function create(){
document.getElementById("bt").disabled=true;

var t1 = document.getElementById("pin");

for (i=0;i<t1.rows.length;i++)
for (j=0;j<t1.rows.cells.length;j++)
t1.rows.cells[j].innerHTML=Math.floor(Math.random()*9);


}

function stopC(){
document.getElementById("bt").disabled=false;
alert("sum : " +sum/10);
}







var mo=0;
function checkCell(e){




if (e.target.tagName== "TD"){
counter++;
if( counter == 10)
stopC();




var tempCellValue = parseInt(e.target.innerHTML);
if (tempCellValue>=5){
e.target.style.backgroundColor = "green"
tempCellValue=tempCellValue+1;
}
else{
e.target.style.backgroundColor = "red"
tempCellValue=tempCellValue -1;
}

}
}







</script>
</head>
<body onclick="checkCell(event)">
<input type="button" name="but" onclick="create()" id="bt" value="&#197;&#205;&#193;&#209;&#206;&#199;"/>

<br><br>
<table border=1 id="pin" style="background-color:yellow">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<p id="finalResult"></p>
</body>
</html>

Δεν εχω καταφερει να παιρνουν τα κελια τυχαιο χρωμα...πρασινο η κοκκινο! Το προχωρησα λιγο μονος και παρακατω....

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Απορια σε καποια ασκηση με javascript

Δημοσίευση από Christianago » 08 Ιουν 2012 20:13

Για δες αν ειναι αυτο που θες. Σιγουρα υπαρχει πιο αποδοτικος τροπος...

Κώδικας: Επιλογή όλων

<html><head>
<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-latest.js"></script>
<script>
	
var counter=1;
var sum=0;
var mo=0;

$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
  
var randVal, floatVal;

for &#40;var i = 0; i < 5; i++&#41;&#123;
$&#40;'#pin'&#41;.append&#40;"<tr><td id='a"+i+"'></td><td id='b"+i+"'></td><td id='c"+i+"'></td><td id='d"+i+"'></td><td id='e"+i+"'></td></tr>"&#41;;
 
randVal = 1+&#40;Math.random&#40;&#41;*&#40;1-2&#41;&#41;;
floatVal = randVal.toFixed&#40;floatVal&#41;;

if &#40;floatVal == 0&#41;&#123;
$&#40;'#a'+i&#41;.css&#40;"background-color", 'red'&#41;;
$&#40;'#a'+i&#41;.addClass&#40;"red"&#41;;
&#125;
else&#123;
$&#40;'#a'+i&#41;.css&#40;"background-color", 'green'&#41;;
$&#40;'#a'+i&#41;.addClass&#40;"green"&#41;;
&#125;

randVal = 1+&#40;Math.random&#40;&#41;*&#40;1-2&#41;&#41;;
floatVal = randVal.toFixed&#40;floatVal&#41;;

if &#40;floatVal == 0&#41;&#123;
$&#40;'#b'+i&#41;.css&#40;"background-color", 'red'&#41;;
$&#40;'#b'+i&#41;.addClass&#40;"red"&#41;;
&#125;
else&#123;
$&#40;'#b'+i&#41;.css&#40;"background-color", 'green'&#41;;
$&#40;'#b'+i&#41;.addClass&#40;"green"&#41;;
&#125;

randVal = 1+&#40;Math.random&#40;&#41;*&#40;1-2&#41;&#41;;
floatVal = randVal.toFixed&#40;floatVal&#41;;

if &#40;floatVal == 0&#41;&#123;
$&#40;'#c'+i&#41;.css&#40;"background-color", 'red'&#41;;
$&#40;'#c'+i&#41;.addClass&#40;"red"&#41;;
&#125;
else&#123;
$&#40;'#c'+i&#41;.css&#40;"background-color", 'green'&#41;;
$&#40;'#c'+i&#41;.addClass&#40;"green"&#41;;
&#125;


randVal = 1+&#40;Math.random&#40;&#41;*&#40;1-2&#41;&#41;;
floatVal = randVal.toFixed&#40;floatVal&#41;;

if &#40;floatVal == 0&#41;&#123;
$&#40;'#d'+i&#41;.css&#40;"background-color", 'red'&#41;;
$&#40;'#d'+i&#41;.addClass&#40;"red"&#41;;
&#125;
else&#123;
$&#40;'#d'+i&#41;.css&#40;"background-color", 'green'&#41;;
$&#40;'#d'+i&#41;.addClass&#40;"green"&#41;;
&#125;

randVal = 1+&#40;Math.random&#40;&#41;*&#40;1-2&#41;&#41;;
floatVal = randVal.toFixed&#40;floatVal&#41;;

if &#40;floatVal == 0&#41;&#123;
$&#40;'#e'+i&#41;.css&#40;"background-color", 'red'&#41;;
$&#40;'#e'+i&#41;.addClass&#40;"red"&#41;;
&#125;
else&#123;
$&#40;'#e'+i&#41;.css&#40;"background-color", 'green'&#41;;
$&#40;'#e'+i&#41;.addClass&#40;"green"&#41;;
&#125;

&#125;


&#125;&#41;;

function create&#40;&#41;&#123;
    
document.getElementById&#40;"bt"&#41;.disabled=true;
var t1 = document.getElementById&#40;"pin"&#41;;

for &#40;i=0;i<t1.rows.length;i++&#41;

    for &#40;j=0;j<t1.rows&#91;i&#93;.cells.length;j++&#41;
    
    t1.rows&#91;i&#93;.cells&#91;j&#93;.innerHTML=Math.floor&#40;Math.random&#40;&#41;*9&#41;;

&#125;

function checkCell&#40;e&#41;&#123;

var elemId = e.target.id;
var tempCellValue = parseInt&#40;e.target.innerHTML&#41;;
$&#40;"#num"+counter&#41;.val&#40;tempCellValue&#41;;

var a1 = parseInt &#40;$&#40;"#num1"&#41;.val&#40;&#41;&#41;;
var a2 = parseInt &#40;$&#40;"#num2"&#41;.val&#40;&#41;&#41;;
var a3 = parseInt &#40;$&#40;"#num3"&#41;.val&#40;&#41;&#41;;
var a4 = parseInt &#40;$&#40;"#num4"&#41;.val&#40;&#41;&#41;;
var a5 = parseInt &#40;$&#40;"#num5"&#41;.val&#40;&#41;&#41;;
var a6 = parseInt &#40;$&#40;"#num6"&#41;.val&#40;&#41;&#41;;
var a7 = parseInt &#40;$&#40;"#num7"&#41;.val&#40;&#41;&#41;;
var a8 = parseInt &#40;$&#40;"#num8"&#41;.val&#40;&#41;&#41;;
var a9 = parseInt &#40;$&#40;"#num9"&#41;.val&#40;&#41;&#41;;
var a10 = parseInt &#40;$&#40;"#num10"&#41;.val&#40;&#41;&#41;;

if&#40;counter == 11&#41;&#123;
document.getElementById&#40;"bt"&#41;.disabled=false;
alert&#40;&#40;a1 + a2 + a3 + a4 + a5 + a6 + a7 + a8 + a9 + a10 / 10&#41;&#41;;
&#125;


if &#40;e.target.tagName == "TD"&#41;&#123;
counter++;

    if &#40; $&#40;"#" + elemId&#41;.hasClass&#40;"green"&#41;&#41;&#123;
    $&#40;"#" + elemId&#41;.css&#40;"background-color", 'red'&#41;;
    $&#40;"#" + elemId&#41;.addClass&#40;"red"&#41;; 
    $&#40;"#" + elemId&#41;.text&#40;tempCellValue-1&#41;; 
    &#125;

    else&#123;
    $&#40;"#" + elemId&#41;.css&#40;"background-color", 'green'&#41;;
    $&#40;"#" + elemId&#41;.addClass&#40;"green"&#41;;
    $&#40;"#" + elemId&#41;.text&#40;tempCellValue+1&#41;;  
    &#125;

    &#125;
&#125;


</script>
</head>

<body onclick="checkCell&#40;event&#41;">
<input type="button" name="but" onclick="create&#40;&#41;" id="bt" value="Start"/>

<br /><br />

<table border="1" id="pin" style="background-color&#58;yellow; cursor&#58;pointer;"></table>

<input type="hidden" id="num1" value="0" />
<input type="hidden" id="num2" value="0" />
<input type="hidden" id="num3" value="0" />
<input type="hidden" id="num4" value="0" />
<input type="hidden" id="num5" value="0" />
<input type="hidden" id="num6" value="0" />
<input type="hidden" id="num7" value="0" />
<input type="hidden" id="num8" value="0" />
<input type="hidden" id="num9" value="0" />
<input type="hidden" id="num10" value="0" />
<p id="finalResult"></p>
</body></html>

fantomas
Δημοσιεύσεις: 38
Εγγραφή: 24 Απρ 2010 15:45

Απορια σε καποια ασκηση με javascript

Δημοσίευση από fantomas » 09 Ιουν 2012 10:42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.auto-style1 {
border: 1px solid #000000;
background-color: #FFFF00;
}
.auto-style2 {
border: 1px solid #000000;
}


.auto-style3 {
text-align: center;
}


</style>

<script>
var xromata=new Array();
xromata[0]="green";
xromata[1]="red";
var xr
var counter=0;
var sum=0;
var mo


function button(){
var t=fill();
document.getElementById("start").disabled=true
}

function fill() {
var myCells=document.getElementsByTagName('td');

for(var i=0;i<myCells.length;i++){
myCells.innerHTML=Math.round((Math.random())*9);
xr=Math.round((Math.random()))
myCells.style.backgroundColor=xromata[xr];
}


}


function kaneclick(e){
if (counter==10){
document.getElementById("start").disabled=false;
mo=sum/10;
alert("O mesos oros einai"+mo);
counter=0
}

var x=parseInt(e.innerHTML);
sum=sum+x

if (e.style.backgroundColor=="red"){
x=x-1;
e.innerHTML=x
e.style.backgroundColor="green"
}

else{e.style.backgroundColor="red"
x=x+1
e.innerHTML=x

}

counter++;

}

</script>
</head>

<body>
<div class="auto-style3" >
<input name="Button1" type="button" value="START" style="width: 189px; height: 38px" id="start" onclick="button()" />
<table class="auto-style1" style="width: 100%">
<tr>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
</tr>
<tr>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
</tr>
<tr>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
</tr>
<tr>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
</tr>
<tr>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
<td class="auto-style2" onclick="kaneclick(this)">&nbsp;</td>
</tr>
</table>

</div>

</body>

</html>
Τελικα εγραψα αυτον τον κωδικα και δουλεψε μια χαρα! Ευχαριστω παντως για την απαντηση.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες