hidden_partially.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript">
  6. var next = 0;
  7. function addVisibleBox() {
  8. var box = document.createElement('DIV');
  9. box.id = 'box' + next++;
  10. box.className = 'redbox';
  11. box.style.width = '150px';
  12. box.style.height = '150px';
  13. box.style.backgroundColor = 'red';
  14. box.style.border = '1px solid black';
  15. box.style.margin = '5px';
  16. box.style.visibility = 'visible'
  17. window.setTimeout(function() {
  18. document.body.appendChild(box);
  19. }, 1000);
  20. }
  21. function addHiddenBox() {
  22. var box = document.createElement('DIV');
  23. box.id = 'box' + next++;
  24. box.className = 'redbox';
  25. box.style.width = '150px';
  26. box.style.height = '150px';
  27. box.style.backgroundColor = 'red';
  28. box.style.border = '1px solid black';
  29. box.style.margin = '5px';
  30. box.style.visibility = 'hidden';
  31. window.setTimeout(function() {
  32. document.body.appendChild(box);
  33. }, 1000);
  34. }
  35. </script>
  36. </head>
  37. <body>
  38. <input id="addVisible" type="button" value="Add a visible box!" onclick="addVisibleBox()"/>
  39. <input id="addHidden" type="button" value="Add a hidden box!" onclick="addHiddenBox();" />
  40. </body>
  41. </html>