原生JS实现的拾色器,先来看看效果:
一部分关键的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>colorpicker</title>
<script src="./colorpicker.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.picker {
width: 300px;
height: 20px;
cursor: pointer;
position: absolute;
left: 40px;
top: 40px;
}
</style>
</head>
<body>
<div class="abc">
<h3>点击下方选择颜色</h3>
<div class="picker" id="color-picker"></div>
</div>
</body>
<script>
var obj = document.getElementById("picker");
var a = Colorpicker.create({
el: "color-picker",
color: "#000fff",
change: function (elem, hex) {
elem.style.backgroundColor = hex;
}
})
</script>
</html>