个人随笔
目录
当前位置: 首页 JS 颜色反转
颜色反转
2019-02-18 22:01:35

用户选择一个颜色,获取反转的颜色

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1 ">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>颜色反转</title>
  9. <style>
  10. div{
  11. width:200px;
  12. height:80px;
  13. background-color:#000;
  14. color:#fff;
  15. font-size:20px;
  16. text-align:center;
  17. line-height:80px;
  18. }
  19. </style>
  20. <script>
  21. function hexToReverse(h) {
  22. var r = 0, g = 0, b = 0;
  23. r = 255 - parseInt(h[0],16)*16 - parseInt(h[1],16);
  24. g = 255 - parseInt(h[2],16)*16 - parseInt(h[3],16);
  25. b = 255 - parseInt(h[4],16)*16 - parseInt(h[5],16);
  26. return (r < 16 ? "0" + r.toString(16).toUpperCase() : r.toString(16).toUpperCase()) + (g < 16 ? "0" + g.toString(16).toUpperCase() : g.toString(16).toUpperCase()) + (b < 16 ? "0" + b.toString(16).toUpperCase() : b.toString(16).toUpperCase());
  27. }
  28. function getReverseColor(){
  29. var a = document.getElementById("choiceColor");
  30. var bg_str =a.value;
  31. var font_str = "#"+hexToReverse(bg_str.replace("#",""));
  32. var aa=document.getElementById("aa");
  33. aa.style.backgroundColor = bg_str;
  34. aa.style.color = font_str;
  35. //alert("背景颜色:"+bg_str);
  36. //alert("文字颜色:"+font_str);
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. 请选择主色(背景色)<input type="color" id="choiceColor"/><input type="button" value="反转" onclick="getReverseColor();"/>
  42. <div id="aa">我是反转后的辅色</div>
  43. </body>
  44. </html>
 237

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2