Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Duddle" data-source="post: 2038572" data-attributes="member: 17775">AW: kleines problem mit javascript[HTML]&lt;html&gt;&nbsp;&lt;head&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;var valueColorMapping = {};// holt farb-id fuer namenfunction getColorByName(name) {&nbsp; &nbsp; if (valueColorMapping[name] === undefined) {&nbsp; &nbsp; var max = -1;&nbsp; &nbsp; for (var key in valueColorMapping) {&nbsp; &nbsp; &nbsp; &nbsp; max = Math.max(valueColorMapping[key], max);&nbsp; &nbsp; }&nbsp; &nbsp; valueColorMapping[name] = max+1;&nbsp; &nbsp; }&nbsp; &nbsp; return valueColorMapping[name];}function getName() {&nbsp; &nbsp; return getSelected().text;}function getValue() {&nbsp; &nbsp; return getSelected().value;}function getSelected() {&nbsp; &nbsp; var frm = document.getElementById(&quot;nameSelect&quot;);&nbsp; &nbsp; return frm.options[frm.selectedIndex];}var timePlanned = new Date();function updateTime() {&nbsp; &nbsp; //setDate ist der Tag ... 0 wäre der letzte Tag vom vorigen Monat, ergo 1&nbsp; &nbsp; timePlanned.setDate(1); &nbsp; &nbsp; timePlanned.setHours(0); &nbsp; &nbsp; timePlanned.setMinutes(0); &nbsp; &nbsp; var slotTime = 15;&nbsp; &nbsp; //in jQuery wäre folgendes ein 3-Zeiler ...&nbsp; &nbsp; var inputs = document.getElementsByTagName(&quot;input&quot;);&nbsp; &nbsp; for(var i in inputs) {&nbsp; &nbsp; var inp = inputs[i];&nbsp; &nbsp; if(!hasClass(inp, &quot;assigment&quot;)) continue;&nbsp; &nbsp; if(inp.value == -1) continue;&nbsp; &nbsp; changeTime(slotTime);&nbsp; &nbsp; }}function hasClass(element, cls) {&nbsp; &nbsp; var r = new RegExp(&#039;\\b&#039; + cls + &#039;\\b&#039;);&nbsp; &nbsp; return r.test(element.className);}function changeTime(diff) {&nbsp; &nbsp; timePlanned.setMinutes(timePlanned.getMinutes() + diff);&nbsp; &nbsp; var div = document.getElementById(&quot;total&quot;);&nbsp; &nbsp; div.innerHTML = &quot;&lt;PRE&gt;geplante zeit:&quot;+(timePlanned.getDate()-1)+&quot;d&quot;+timePlanned.getHours()+&quot;h&quot;+timePlanned.getMinutes()+&quot;m&lt;/PRE&gt;&quot;;}function change(day, slot, canToggle) {&nbsp; &nbsp; var newValue = getValue();&nbsp; &nbsp; var newName = getName();&nbsp; &nbsp; var input = document.getElementById(&quot;input_&quot;+day+&quot;_&quot;+slot);&nbsp; &nbsp; var img = document.getElementById(&quot;img_&quot;+day+&quot;_&quot;+slot);&nbsp; &nbsp; //default-Wert von canToggle ist true&nbsp; &nbsp; canToggle = typeof canToggle !== &#039;undefined&#039; ? canToggle : true;&nbsp; &nbsp; //falls kein richtiger Name / value = 0, dann ausschalten&nbsp; &nbsp; //gleiches für ein togglen bei gesetztem Namen&nbsp; &nbsp; if(newValue == 0 || (input.value == newValue &amp;&amp; canToggle)) {&nbsp; &nbsp; //default&nbsp; &nbsp; img.src = &quot;img/plan/-1.png&quot;;&nbsp; &nbsp; img.title = name;&nbsp; &nbsp; input.value = -1;&nbsp; &nbsp; } else { &nbsp; &nbsp; img.src = &quot;img/plan/&quot;+getColorByName(newName)+&quot;.png&quot;;&nbsp; &nbsp; img.title = newName;&nbsp; &nbsp; input.value = newValue;&nbsp; &nbsp; }}var lastClicked = {day:null, slot:null, colorId:null};function click(e, day, slot) {&nbsp; &nbsp; var e = e || window.event;&nbsp; &nbsp; var newColor = getColorByName(getName());&nbsp; &nbsp; if(e.ctrlKey &amp;&amp; lastClicked.day != null &amp;&amp; lastClicked.day == day &amp;&amp; lastClicked.colorId == newColor) {&nbsp; &nbsp; //Bereiche. nur im gleichen Tag möglich&nbsp; &nbsp; var min = Math.min(lastClicked.slot, slot);&nbsp; &nbsp; var max = Math.max(lastClicked.slot, slot);&nbsp; &nbsp; for(var slotToChange = min; slotToChange &lt;= max; slotToChange++) {&nbsp; &nbsp; &nbsp; &nbsp; change(day, slotToChange, false);&nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; change(day, slot);&nbsp; &nbsp; }&nbsp; &nbsp; lastClicked.day = day;&nbsp; &nbsp; lastClicked.slot = slot;&nbsp; &nbsp; lastClicked.colorId = newColor;&nbsp; &nbsp; updateTime();}&lt;/script&gt;&nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp;&nbsp; .day {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; vertical-align: top;&nbsp; &nbsp; font-size: 60%;&nbsp; &nbsp; font-weight: bold;&nbsp;&nbsp; }&nbsp;&nbsp; .spc {&nbsp; &nbsp; font-size: 50%;&nbsp;&nbsp; }&nbsp;&nbsp; img {&nbsp; &nbsp; border: 0;&nbsp; &nbsp; vertical-align: middle;&nbsp;&nbsp; }&nbsp;&nbsp; form {&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding: 0px;&nbsp;&nbsp; }&nbsp; &lt;/style&gt;&nbsp;&lt;/head&gt;&nbsp;&lt;body&gt;&lt;center&gt;&nbsp; &lt;input type=&quot;hidden&quot; id=&quot;color&quot; name=&quot;color&quot;&gt;&nbsp; &lt;form action=&quot;&quot; method=&quot;post&quot;&gt;&nbsp;&nbsp; &lt;select id=&quot;nameSelect&quot; name=&quot;pers&quot;&gt;&nbsp; &nbsp; &lt;option value=&quot;0&quot; selected&gt;----&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;10&quot;&gt;Rémi&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;20&quot;&gt;Marcel&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;30&quot;&gt;Michel&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;40&quot;&gt;Christiane&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;50&quot;&gt;Julien&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;60&quot;&gt;Matthieu&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;70&quot;&gt;Vincent&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;80&quot;&gt;Stéphane&lt;/option&gt;&nbsp; &nbsp; &lt;option value=&quot;90&quot;&gt;Marc&lt;/option&gt;&nbsp;&nbsp; &lt;/select&gt;&nbsp;&nbsp; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&nbsp;&nbsp; &lt;table summary=&quot;&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp;&nbsp; &lt;td class=&quot;day&quot; style=&quot;height:15px;&quot;&gt;Hrs-&gt;&lt;/td&gt;&lt;?phpif (isset($_POST[&#039;tab&#039;])) {&nbsp; &nbsp; print_r($_POST[&#039;tab&#039;]);}else for($j=0;$j&lt;1;$j++) for($i=0;$i&lt;96;$i++) $l[$j][$i]=-1;$jrs = array(&quot;Lun&quot;,&quot;Mar&quot;,&quot;Mer&quot;,&quot;Jeu&quot;,&quot;Ven&quot;,&quot;Sam&quot;,&quot;Dim&quot;);for($k=0;$k&lt;24;$k++)&nbsp; echo &#039;&lt;td class=&quot;day&quot; colspan=&quot;5&quot;&gt;&#039;.$k.&#039;&lt;/td&gt;&#039;;echo &quot;\r&lt;/tr&gt;&quot;;for($j=0;$j&lt;1;$j++) {&nbsp; &nbsp; echo &#039;&lt;tr&gt;&nbsp; &nbsp; &lt;td valign=&quot;middle&quot;&gt;&#039;.$jrs[$j].&#039;&amp;nbsp;&lt;/td&gt;&#039;;&nbsp; &nbsp; for($i=0;$i&lt;96;$i++) {&nbsp; &nbsp; if ($i%4==0) echo &#039;&lt;td class=&quot;spc&quot;&gt;&amp;nbsp;&lt;/td&gt;&#039;;&nbsp; &nbsp; $color = -1;&nbsp; &nbsp; &nbsp; &nbsp; echo &#039;&lt;td valign=&quot;middle&quot;&gt;&nbsp; &nbsp;&nbsp; &lt;input class=&quot;assigment&quot; id=&quot;input_&#039;.$j.&#039;_&#039;.$i.&#039;&quot; type=&quot;hidden&quot; name=&quot;tab[&#039;.$j.&#039;][&#039;.$i.&#039;]&quot; value=&quot;&#039;.$l[$j][$i].&#039;&quot; /&gt;&nbsp; &nbsp;&nbsp; &lt;img src=&quot;img/plan/&#039;.$color.&#039;.png&quot; id=&quot;img_&#039;.$j.&#039;_&#039;.$i.&#039;&quot; onClick=&quot;click(event,&#039;.$j.&#039;,&#039;.$i.&#039;)&quot; alt=&quot;&quot; title=&quot;&quot; /&gt;&nbsp; &nbsp;&nbsp; &lt;/td&gt;&#039;;&nbsp; &nbsp; }&nbsp; &nbsp; echo &quot;\r&lt;/tr&gt;\n\t&quot;;}?&gt;&nbsp;&nbsp; &lt;/table&gt;&nbsp;&nbsp; &lt;br /&gt;&nbsp;&nbsp; &lt;input type=&quot;submit&quot; value=&quot;enregistrer&quot; /&gt;&nbsp; &lt;/form&gt;&nbsp; &lt;div id=&#039;total&#039; style=&quot;float:center; position:relative; center:75px;&quot;&gt;&lt;/div&gt;&nbsp;&lt;/center&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]Die Logik von maj_img steckt jetzt in change(), wobei aber ausschliesslich mit Tag- und Slot-Nummer gearbeitet wird zur Identifizierung der Elemente. Zusätzlich ist noch ein optionales Argument dabei, welches bestimmt ob das zu setzende Feld getogglet werden kann. Das ist hilfreich bei Bereichs-Setzen. Ausserdem wird noch unterschieden ob der derzeitige Klick für einen richtigen Namen kommt. Wenn nicht (&quot;---&quot; ausgewählt), wird das gelöscht. Damit kann man dann Bereiche löschen.Der Event selbst, und die Unterscheidung ob Bereich oder nicht, ist in der kreativ als click() bezeichneten Funktion. Ich habe hier nur STRG genommen, weil ALT bei mir mit anderen Funktionen belegt ist. Ein Bereich darf nur im gleichen Tag und mit der gleichen Person gesetzt werden. Der Rest sollte eindeutig sein.Die dritte Änderung ist die Verwaltung der zugewiesenen Gesamtzeit. Jetzt wird einfach nach jedem Klick gezählt wieviele zugewiesen sind und die Zeit entsprechend berechnet. Das ist zwar immer noch nicht ideal, aber meiner Meinung nach besser als vorher.So, jetzt bin ich gespannt, was als nächstes im <a href="http://en.wikipedia.org/wiki/Feature_creep" target="_blank">feature creep</a> kommt <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" />Duddle</blockquote>

[QUOTE="Duddle, post: 2038572, member: 17775"] [b]AW: kleines problem mit javascript[/b] [HTML] <html> <head> <script language="javascript" type="text/javascript"> var valueColorMapping = {}; // holt farb-id fuer namen function getColorByName(name) { if (valueColorMapping[name] === undefined) { var max = -1; for (var key in valueColorMapping) { max = Math.max(valueColorMapping[key], max); } valueColorMapping[name] = max+1; } return valueColorMapping[name]; } function getName() { return getSelected().text; } function getValue() { return getSelected().value; } function getSelected() { var frm = document.getElementById("nameSelect"); return frm.options[frm.selectedIndex]; } var timePlanned = new Date(); function updateTime() { //setDate ist der Tag ... 0 wäre der letzte Tag vom vorigen Monat, ergo 1 timePlanned.setDate(1); timePlanned.setHours(0); timePlanned.setMinutes(0); var slotTime = 15; //in jQuery wäre folgendes ein 3-Zeiler ... var inputs = document.getElementsByTagName("input"); for(var i in inputs) { var inp = inputs[i]; if(!hasClass(inp, "assigment")) continue; if(inp.value == -1) continue; changeTime(slotTime); } } function hasClass(element, cls) { var r = new RegExp('\\b' + cls + '\\b'); return r.test(element.className); } function changeTime(diff) { timePlanned.setMinutes(timePlanned.getMinutes() + diff); var div = document.getElementById("total"); div.innerHTML = "<PRE>geplante zeit:"+(timePlanned.getDate()-1)+"d"+timePlanned.getHours()+"h"+timePlanned.getMinutes()+"m</PRE>"; } function change(day, slot, canToggle) { var newValue = getValue(); var newName = getName(); var input = document.getElementById("input_"+day+"_"+slot); var img = document.getElementById("img_"+day+"_"+slot); //default-Wert von canToggle ist true canToggle = typeof canToggle !== 'undefined' ? canToggle : true; //falls kein richtiger Name / value = 0, dann ausschalten //gleiches für ein togglen bei gesetztem Namen if(newValue == 0 || (input.value == newValue && canToggle)) { //default img.src = "img/plan/-1.png"; img.title = name; input.value = -1; } else { img.src = "img/plan/"+getColorByName(newName)+".png"; img.title = newName; input.value = newValue; } } var lastClicked = {day:null, slot:null, colorId:null}; function click(e, day, slot) { var e = e || window.event; var newColor = getColorByName(getName()); if(e.ctrlKey && lastClicked.day != null && lastClicked.day == day && lastClicked.colorId == newColor) { //Bereiche. nur im gleichen Tag möglich var min = Math.min(lastClicked.slot, slot); var max = Math.max(lastClicked.slot, slot); for(var slotToChange = min; slotToChange <= max; slotToChange++) { change(day, slotToChange, false); } } else { change(day, slot); } lastClicked.day = day; lastClicked.slot = slot; lastClicked.colorId = newColor; updateTime(); } </script> <style type="text/css"> .day { text-align: center; vertical-align: top; font-size: 60%; font-weight: bold; } .spc { font-size: 50%; } img { border: 0; vertical-align: middle; } form { margin: 0px; padding: 0px; } </style> </head> <body><center> <input type="hidden" id="color" name="color"> <form action="" method="post"> <select id="nameSelect" name="pers"> <option value="0" selected>----</option> <option value="10">Rémi</option> <option value="20">Marcel</option> <option value="30">Michel</option> <option value="40">Christiane</option> <option value="50">Julien</option> <option value="60">Matthieu</option> <option value="70">Vincent</option> <option value="80">Stéphane</option> <option value="90">Marc</option> </select> <table summary="" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="day" style="height:15px;">Hrs-></td> <?php if (isset($_POST['tab'])) { print_r($_POST['tab']); } else for($j=0;$j<1;$j++) for($i=0;$i<96;$i++) $l[$j][$i]=-1; $jrs = array("Lun","Mar","Mer","Jeu","Ven","Sam","Dim"); for($k=0;$k<24;$k++) echo '<td class="day" colspan="5">'.$k.'</td>'; echo "\r</tr>"; for($j=0;$j<1;$j++) { echo '<tr> <td valign="middle">'.$jrs[$j].' </td>'; for($i=0;$i<96;$i++) { if ($i%4==0) echo '<td class="spc"> </td>'; $color = -1; echo '<td valign="middle"> <input class="assigment" id="input_'.$j.'_'.$i.'" type="hidden" name="tab['.$j.']['.$i.']" value="'.$l[$j][$i].'" /> <img src="img/plan/'.$color.'.png" id="img_'.$j.'_'.$i.'" onClick="click(event,'.$j.','.$i.')" alt="" title="" /> </td>'; } echo "\r</tr>\n\t"; } ?> </table> <input type="submit" value="enregistrer" /> </form> <div id='total' style="float:center; position:relative; center:75px;"></div> </center></body> </html> [/HTML] Die Logik von maj_img steckt jetzt in change(), wobei aber ausschliesslich mit Tag- und Slot-Nummer gearbeitet wird zur Identifizierung der Elemente. Zusätzlich ist noch ein optionales Argument dabei, welches bestimmt ob das zu setzende Feld getogglet werden kann. Das ist hilfreich bei Bereichs-Setzen. Ausserdem wird noch unterschieden ob der derzeitige Klick für einen richtigen Namen kommt. Wenn nicht ("---" ausgewählt), wird das gelöscht. Damit kann man dann Bereiche löschen. Der Event selbst, und die Unterscheidung ob Bereich oder nicht, ist in der kreativ als click() bezeichneten Funktion. Ich habe hier nur STRG genommen, weil ALT bei mir mit anderen Funktionen belegt ist. Ein Bereich darf nur im gleichen Tag und mit der gleichen Person gesetzt werden. Der Rest sollte eindeutig sein. Die dritte Änderung ist die Verwaltung der zugewiesenen Gesamtzeit. Jetzt wird einfach nach jedem Klick gezählt wieviele zugewiesen sind und die Zeit entsprechend berechnet. Das ist zwar immer noch nicht ideal, aber meiner Meinung nach besser als vorher. So, jetzt bin ich gespannt, was als nächstes im [URL="http://en.wikipedia.org/wiki/Feature_creep"]feature creep[/URL] kommt :) Duddle [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?