screen_frame2.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html><head>
  3. <title>screen frame2</title>
  4. <script type="text/javascript" src="screen.js"></script>
  5. <link rel="stylesheet" type="text/css" href="screen.css" />
  6. </head>
  7. <body style="width: 100px; height: 100px;">
  8. <style>
  9. #content {
  10. width: 100%;
  11. height: 100%;
  12. }
  13. .row {
  14. height: 20px;
  15. width: 100%;
  16. }
  17. .column {
  18. height: 20px;
  19. width: 20px;
  20. }
  21. </style>
  22. <table id="content">
  23. <tr class="row row1">
  24. <td class="column column1 cell" id="cell11">&nbsp;</td>
  25. <td class="column column2 cell" id="cell12">&nbsp;</td>
  26. <td class="column column3 cell" id="cell13">&nbsp;</td>
  27. <td class="column column4 cell" id="cell14">&nbsp;</td>
  28. <td class="column column5 cell" id="cell15">&nbsp;</td>
  29. </tr>
  30. <tr class="row row2">
  31. <td class="column column1 cell" id="cell21">&nbsp;</td>
  32. <td class="column column2 cell" id="cell22">&nbsp;</td>
  33. <td class="column column3 cell" id="cell23">&nbsp;</td>
  34. <td class="column column4 cell" id="cell24">&nbsp;</td>
  35. <td class="column column5 cell" id="cell25">&nbsp;</td>
  36. </tr>
  37. <tr class="row row3">
  38. <td class="column column1 cell" id="cell31">&nbsp;</td>
  39. <td class="column column2 cell" id="cell32">&nbsp;</td>
  40. <td class="column column3 cell" id="cell33">&nbsp;</td>
  41. <td class="column column4 cell" id="cell34">&nbsp;</td>
  42. <td class="column column5 cell" id="cell35">&nbsp;</td>
  43. </tr>
  44. <tr class="row row4">
  45. <td class="column column1 cell" id="cell41">&nbsp;</td>
  46. <td class="column column2 cell" id="cell42">&nbsp;</td>
  47. <td class="column column3 cell" id="cell43">&nbsp;</td>
  48. <td class="column column4 cell" id="cell44">&nbsp;</td>
  49. <td class="column column5 cell" id="cell45">&nbsp;</td>
  50. </tr>
  51. <tr class="row row5">
  52. <td class="column column1 cell" id="cell51">&nbsp;</td>
  53. <td class="column column2 cell" id="cell52">&nbsp;</td>
  54. <td class="column column3 cell" id="cell53">&nbsp;</td>
  55. <td class="column column4 cell" id="cell54">&nbsp;</td>
  56. <td class="column column5 cell" id="cell55">&nbsp;</td>
  57. </tr>
  58. </table>
  59. <script>
  60. var initialColor = 0x0F0F0F;
  61. var stepColor = 1000;
  62. var cnt = 1;
  63. for (var i = 1; i < 6; i++) {
  64. for (var j = 1; j < 6; j++) {
  65. el = document.getElementById('cell' + i + '' + j);
  66. el.style.backgroundColor = toColor(initialColor + (cnt * stepColor));
  67. cnt++;
  68. }
  69. }
  70. </script>
  71. </body>
  72. </html>