keyboard_shortcut.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <body style="background: white">
  3. <div style="background: red">CTRL + 1: red</div>
  4. <div style="background: green">SHIFT + 1: green</div>
  5. <div style="background: yellow">CTRL + SHIFT + 1: yellow</div>
  6. <div style="background: lightblue">ALT + 1: lightblue</div>
  7. <div style="background: lightgreen">CTRL + ALT + 1: lightgreen</div>
  8. <div style="background: silver">SHIFT + ALT + 1: silver</div>
  9. <div style="background: magenta">CTRL + SHIFT + ALT + 1: magenta</div>
  10. <script>
  11. var colors = {};
  12. colors[0x001] = 'red';
  13. colors[0x010] = 'green';
  14. colors[0x011] = 'yellow';
  15. colors[0x100] = 'lightblue';
  16. colors[0x101] = 'lightgreen';
  17. colors[0x110] = 'silver';
  18. colors[0x111] = 'magenta';
  19. document.onkeydown = function(e) {
  20. if (e.keyCode != 49) return;
  21. var mask = 0;
  22. if (e.ctrlKey) mask |= 0x001;
  23. if (e.shiftKey) mask |= 0x010;
  24. if (e.altKey) mask |= 0x100;
  25. console.log(mask);
  26. if (mask) {
  27. document.body.style.backgroundColor = colors[mask];
  28. }
  29. e.preventDefault();
  30. e.stopPropagation();
  31. return false;
  32. };
  33. </script>