js 随机取色板
作者：互联网
随机生成rgb 或# 类型颜色的面板
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,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>随机取色板</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-self: center;
flex-wrap: wrap;
}
header {
display: none;
position: absolute;
top: 8vh;
width: 300px;
height: 300px;
background-color: #000;
text-align: center;
z-index: 999;
}
header input {
width: 100%;
height: 23px;
}
header p {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 230px;
}
span {
margin: 0 auto;
width: 90%;
height: 50px;
padding: 0px 100px;
background-color: #f22c4e;
}
button {
margin: 10px 30px;
width: 15%;
height: 30px;
}
div {
width: 18%;
height: 150px;
line-height: 150px;
text-align: center;
font-size: 30px;
color: #fff;
border: 2px solid #fff;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<header>
<input type="text" name="" id="" placeholder="请输入# 或rgba 的颜色 例如rgba(0,0,0,0)">
<p></p>
</header>
<span>
<button onclick="" style="color: #af1f95;">正常模式</button>
<button onclick="addcolor();" style="color: #af1f95;">更换颜色</button>
<button onclick="random();" style="color: #af1f95;">自定义查询颜色</button>
</span>
</body>
<script>
var header = document.querySelector('header')
var hinput = document.querySelector('header input')
var hp = document.querySelector('header p')
function random() {
header.style.display = 'block'
hp.innerHTML = '点击背景颜色复制'
header.style.backgroundColor = 'black'
header.onmouseleave = function () {
header.style.display = 'none'
hinput.value = ''
}
}
hinput.onclick = function (e) {
e.stopPropagation()
}
hinput.oninput = function (e) {
// 焦点事件阻止不了冒泡事件
e.stopPropagation()
// console.log(hinput.value);
header.style.backgroundColor = hinput.value
hp.innerHTML = '点击背景颜色复制'
}
header.onclick = function () {
if (hinput.value === '') {
} else {
hinput.select(hinput.value)
document.execCommand('copy')
hp.innerHTML = '已复制'
}
}
var body = document.body
for (var i = 0; i < 100; i++) {
var cdiv = document.createElement('div')
cdiv.classList.add('box')
body.appendChild(cdiv)
}
var btn = document.querySelectorAll('button')
var div = document.querySelectorAll('div')
function changeColor() {
var chars = '0123456789abcdef'
var colorLength = 6
var color = ''
for (var i = 0, l = colorLength; i < l; i++) {
var colorbgc = Math.floor(Math.random() * (chars.length))
color += chars.substring(colorbgc, colorbgc + 1)
}
return '#' + color;
}
var flag = 0;
addcolor()
function addcolor() {
// 遍历循环点击事件不用立即执行函数
div.forEach(e => {
if (flag === 0) {
var newcolor = changeColor();
e.style.fontSize = '30px'
} else {
var newcolor = changeColor1();
e.style.fontSize = '20px'
}
e.style.backgroundColor = newcolor
e.innerHTML = newcolor
e.onclick = function copyLink() {
// 获取点击的值
var spanvalue = e.innerHTML
// alert(spanvalue);
// select() 只对input 和txetarea 有效
// 创建要赋值的input 元素
var cinput = document.createElement('input')
// 需要添加后,浏览器才能执行选中功能
body.appendChild(cinput)
// 给input 赋值
cinput.value = spanvalue
// 选中input 框的内容
cinput.select(cinput.value)
// 执行浏览器复制命令
document.execCommand('copy')
//移除input
body.removeChild(cinput)
// 提示已复制
// alert('已复制')
e.innerHTML = '(已复制)'
e.style.width = '25%'
e.style.height = '155px'
e.style.boxShadow = ' inset 0 0 6px red'
e.onmouseleave = function () {
e.style.width = '18%'
e.style.height = '150px'
e.innerHTML = newcolor
e.style.boxShadow = '1px 1px 2px rgba(0, 0, 0, 0.2)'
}
}
})
}
function changeColor1() {
var r = Math.round(Math.random() * 255)
var g = Math.round(Math.random() * 255)
var b = Math.round(Math.random() * 255)
// var a=Math.random()
return 'rgba(' + r + ',' + g + ',' + b + ',' + 1 + ')'
}
btn[0].onclick = function () {
if (flag === 0) {
flag = 1;
addcolor()
btn[0].innerHTML = 'rgba 模式'
} else {
flag = 0;
addcolor()
btn[0].innerHTML = '正常模式'
}
}
btn[1].onclick = function () {
addcolor()
}
</script>
</html>
结果如图:
标签：function,style,js,header,取色,随机,var,document,Math 来源： https://blog.csdn.net/qq_51999757/article/details/120256236