| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| background-color: rgb(255, 255, 255); |
| } |
| |
| #textBox { |
| position: absolute; |
| left:460px; |
| top:400px; |
| width:1000px; |
| height:200px; |
| font-size:144px; |
| color:#FF0000; |
| transition: color 2s; |
| } |
| </style> |
| </head> |
| <body> |
| <div id='textBox'>Hello, Cobalt!</div> |
| <script type="text/javascript"> |
| var colors = [ |
| 'rgb(255, 0, 0)', |
| 'rgb(0, 255, 255)', |
| 'rgb(0, 255, 0)', |
| 'rgb(255, 0, 255)', |
| 'rgb(0, 0, 255)', |
| 'rgb(255, 255, 0)' |
| ]; |
| |
| var colorIndex = 0; |
| |
| function refresh() { |
| var textBox = document.getElementById('textBox'); |
| textBox.style.color = colors[colorIndex]; |
| } |
| |
| document.addEventListener('keydown', function(e) { |
| if (e.keyCode == 37) { |
| // Left arrow key was pressed. |
| colorIndex -= 1; |
| if (colorIndex < 0) { |
| colorIndex = colors.length - 1; |
| } |
| refresh(); |
| } else if (e.keyCode == 39) { |
| // Right arrow key was pressed. |
| colorIndex += 1; |
| if (colorIndex >= colors.length) { |
| colorIndex = 0; |
| } |
| refresh(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |