首先你的了解颜色的概念
下面我简单介绍下颜色概念在32位系统上我们所看到的颜色由RGB三原色显示再加上一个透明度通道就形成了多种多样的颜色
多的我就不多说了下面直接写一份演示代码
<!DOCTYPE html><html>
<head>
<title>test</title>
<style>
.tsetDiv{
width:40px
height: 40px
border-radius: 100%
font-size: 0
display: inline-block
margin-left: 10px
vertical-align: middle
}
#boxF{
width:300px
font-size: 0
height: auto
}
</style>
</head>
<body>
<div id="boxF"></div>
<script type="text/javascript">
var boxf=document.getElementById("boxF")
var divC=null
var r=0
var g=0
var b=0
for(var i=0i<10i++){
for(var j=0j<10j++){
divC=document.createElement("div")
divC.style.backgroundColor="rgb("+r+","+g+","+b+")"
divC.setAttribute("class","tsetDiv")
boxf.appendChild(divC)
}
//修改r g b加的不同值可以得到不同的效果 rgb最大值为255 所以不用担心超过不显示
r+=15
g+=25
b+=35
}
</script>
</body>
</html>
运行效果为下图
调用的例子：
console.log(ColorLuminance(colorRGB(),0.5)) //先自动生成16进制颜色，在转成比原有颜色轻50%；
//16进制随机颜色
function colorRGB(){
return '#' + (function (h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
ColorLuminance接受两个参数：
参数1： 十六进制颜色值，例如“#abc”或“＃123456”（散列是可选的）
参数2： 亮度因数，即，-0.1是10％更暗，0.2是轻20％等。
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '')
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]
}
lum = lum || 0
// convert to decimal and change luminosity
var rgb = "#", c, i
for (i = 0 i < 3 i++) {
c = parseInt(hex.substr(i*2,2), 16)
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16)
rgb += ("00"+c).substr(c.length)
}
return rgb
}
相关资源：https://blog.csdn.net/dingshi7798/article/details/105829757
1，每个按钮上都会有事件2,若输入的是数字，可以将点击过的数字存到一个变量中，累计你输入过的数字
3，每点击一个数字你可以替换掉一个image（输入密码中的那个圆圈，我一般都会用替换image来达到输入一个加一个这样的显示效果），长度是你变量中字符的个数
4，当你输入密码完成后会触发一个事件告诉浏览器你密码输入完成，这时候重新定义一个变量来保存你的确认密码中的数字，操作同输入密码一样
5，判断输入密码和确认密码是否一致可通过判断刚才定义的两个变量是否相等
这够详细了吧
