SHOW:
|
|
- or go back to the newest paste.
| 1 | <html> | |
| 2 | <head> | |
| 3 | <script type="text/javascript"> | |
| 4 | var div; | |
| 5 | var divRef; | |
| 6 | var selct; | |
| 7 | var delay = 0; | |
| 8 | function init() {
| |
| 9 | div=document.getElementById("target");
| |
| 10 | divRef=document.getElementById("reference");
| |
| 11 | selct=document.getElementById("src");
| |
| 12 | var html=""; | |
| 13 | for(var i=0; i<=100; i++) {
| |
| 14 | html += "<option value=\"" + (i*10) + "\">" + (i*10) + "ms</option>"; | |
| 15 | } | |
| 16 | selct.innerHTML = html; | |
| 17 | } | |
| 18 | ||
| 19 | function setLag() {
| |
| 20 | delay = selct.options[selct.selectedIndex].value; | |
| 21 | } | |
| 22 | ||
| 23 | function go() {
| |
| 24 | setTimeout(setClick, delay); | |
| 25 | divRef.style.backgroundColor = "pink"; | |
| 26 | } | |
| 27 | ||
| 28 | function setClick() {
| |
| 29 | div.style.backgroundColor = "pink"; | |
| 30 | setTimeout(resume, 500); | |
| 31 | - | div.style.backgroundColor = "lightblue "; |
| 31 | + | |
| 32 | ||
| 33 | function resume() {
| |
| 34 | div.style.backgroundColor = "lightblue "; | |
| 35 | divRef.style.backgroundColor = "lightblue "; | |
| 36 | } | |
| 37 | - | Latence <select id="src" size="1" onchange="setLag()"></select> |
| 37 | + | |
| 38 | - | <div style="width:300px;height:50px;background-color:lightblue" id="target" onclick="go()">Cliquer-ici</div> |
| 38 | + | |
| 39 | </head> | |
| 40 | <body onload="init()"> | |
| 41 | <table> | |
| 42 | <tr> | |
| 43 | <th>Latence <select id="src" size="1" onchange="setLag()"></select></th> | |
| 44 | <th>Latence 0ms</th> | |
| 45 | </tr> | |
| 46 | <tr> | |
| 47 | <td><div style="width:200px;height:50px;background-color:lightblue" id="target" onclick="go()">Cliquer-ici</div></td> | |
| 48 | <td><div style="width:200px;height:50px;background-color:lightblue" id="reference">Référence</div></td> | |
| 49 | </tr> | |
| 50 | </table> | |
| 51 | </body> | |
| 52 | </html> |
