HTML实现在线取色器
生活随笔
收集整理的這篇文章主要介紹了
HTML实现在线取色器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言：本demo使用了HTML5的input:color元素，不同瀏覽器對取色器的實現不同，Chrome瀏覽器或者與其同內核的瀏覽器都可以正常使用
代碼及使用方法
html代碼如下：
點擊在線運行
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取色器</title><style>input[type="color"] {width: 200px;height: 200px;}div {float: left;margin: 50px 50px;}input[type="text"] {cursor: pointer;padding-left: 20px;}</style> </head><body><div id="box1"><input type="color" name="" value="#ff0000" id="color"></div><div><b style="color: rgb(252, 85, 49)">鼠標點擊后就會復制到剪切板</b><p><span>HEX: </span><input type="text" name="" value="#ff0000" id="hex" readonly></p><p><span>RGB: </span><input type="text" name="" value="rgb(255, 0, 0)" id="rgb" readonly></p></div><script>const colorObj = document.getElementById('color');const hexObj = document.getElementById('hex');const rgbObj = document.getElementById('rgb');colorObj.oninput = function () {hexObj.value = colorObj.value;rgbObj.value = hexToRGB(colorObj.value);}hexObj.onclick = function () {copyToClipboard(hexObj.value);}rgbObj.onclick = function () {copyToClipboard(hexToRGB(colorObj.value));}// hex 轉換為 rgbfunction hexToRGB(hex) {console.log(hex, typeof hex);const red = Number('0x' + hex.substring(1, 3));const green = Number('0x' + hex.substring(3, 5));const blue = Number('0x' + hex.substring(5, 7));return `rgb(${red}, ${green}, ${blue})`;}// 復制到剪切板function copyToClipboard(str) {if (navigator && navigator.clipboard && navigator.clipboard.writeText)return navigator.clipboard.writeText(str);return Promise.reject('The Clipboard API is not available.');};</script> </body> </html>使用方法
總結
以上是生活随笔為你收集整理的HTML实现在线取色器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java深度克隆大数据_Java - 深
- 下一篇： 前端在线取色器工具