用户:F.FLY-阿末-/cipher-old

这里是老式密码盘的代码和讲解，可供有编辑老式密码盘意愿的林泊参考和复制
代码模板是七位密码，如果有其他长度密码请自行增加/减少代码段
写在前面：每个框之间的注解是对上一个框中的内容的解释，请分清。

<center> </center>

首先，为了观感，可给最终显示内容（最后一段代码）前的所有的代码套上居中tag

<div class="lw-treediv W0">'''Enter password: </br>[ <sub>_ _ _ _ _ _ _</sub> ]'''</div>
<div class="lw-treediv W1 R1" style="display:none;" >'''Enter password: </br>[ <sub>* _ _ _ _ _ _</sub> ]'''</div>
<div class="lw-treediv W2 R2" style="display:none;" >'''Enter password: </br>[ <sub>* * _ _ _ _ _</sub> ]'''</div>
<div class="lw-treediv W3 R3" style="display:none;" >'''Enter password: </br>[ <sub>* * * _ _ _ _</sub> ]'''</div>
<div class="lw-treediv W4 R4" style="display:none;" >'''Enter password: </br>[ <sub>* * * * _ _ _</sub> ]'''</div>
<div class="lw-treediv W5 R5" style="display:none;" >'''Enter password: </br>[ <sub>* * * * * _ _</sub> ]'''</div>
<div class="lw-treediv W6 R6" style="display:none;" >'''Enter password: </br>[ <sub>* * * * * * _</sub> ]'''</div>
<div class="lw-treediv P0" style="display:none;" >
'''[ U N L O C K E D ]'''

{{TreeButton|show=R0|name=CONTINUE⇒}}
</div>
<div class="lw-treediv W7" style="display:none;" >
'''[ACCESS DENIED]'''

{{TreeButton|show=W0|name=RETRY}}
</div>

密码条演出部分，根据需要密码长度自行添加/删除div class，注意密码条段的调整

<span class="lw-treediv W0">
{{TreeButton|show=W1|name=Q }}{{TreeButton|show=W1|name=W }}{{TreeButton|show=W1|name=E }}{{TreeButton|show=W1|name=R }}{{TreeButton|show=W1|name=T }}{{TreeButton|show=W1|name=Y }}{{TreeButton|show=W1|name=U }}{{TreeButton|show=W1|name=I }}{{TreeButton|show=W1|name=O }}{{TreeButton|show=W1|name=P }}<br>
{{TreeButton|show=W1|name=A }}{{TreeButton|show=W1|name=S }}{{TreeButton|show=W1|name=D }}{{TreeButton|show=W1|name=F }}{{TreeButton|show=W1|name=G }}{{TreeButton|show=W1|name=H }}{{TreeButton|show=W1|name=J }}{{TreeButton|show=W1|name=K }}{{TreeButton|show=W1|name=L }}<br>
{{TreeButton|show=W1|name=Z }}{{TreeButton|show=W1|name=X }}{{TreeButton|show=W1|name=C }}{{TreeButton|show=W1|name=V }}{{TreeButton|show=W1|name=B }}{{TreeButton|show=W1|name=N }}{{TreeButton|show=W1|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

初始显示，将第一位正确密码对应字母的“show=W1”替换成“show=R1”

<span class="lw-treediv R1" style="display:none;">
{{TreeButton|show=W2|name=Q }}{{TreeButton|show=W2|name=W }}{{TreeButton|show=W2|name=E }}{{TreeButton|show=W2|name=R }}{{TreeButton|show=W2|name=T }}{{TreeButton|show=W2|name=Y }}{{TreeButton|show=W2|name=U }}{{TreeButton|show=W2|name=I }}{{TreeButton|show=W2|name=O }}{{TreeButton|show=W2|name=P }}<br>
{{TreeButton|show=W2|name=A }}{{TreeButton|show=W2|name=S }}{{TreeButton|show=W2|name=D }}{{TreeButton|show=W2|name=F }}{{TreeButton|show=W2|name=G }}{{TreeButton|show=W2|name=H }}{{TreeButton|show=W2|name=J }}{{TreeButton|show=W2|name=K }}{{TreeButton|show=W2|name=L }}<br>
{{TreeButton|show=W2|name=Z }}{{TreeButton|show=W2|name=X }}{{TreeButton|show=W2|name=C }}{{TreeButton|show=W2|name=V }}{{TreeButton|show=W2|name=B }}{{TreeButton|show=W2|name=N }}{{TreeButton|show=W2|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv R2" style="display:none;">
{{TreeButton|show=W3|name=Q }}{{TreeButton|show=W3|name=W }}{{TreeButton|show=W3|name=E }}{{TreeButton|show=W3|name=R }}{{TreeButton|show=W3|name=T }}{{TreeButton|show=W3|name=Y }}{{TreeButton|show=W3|name=U }}{{TreeButton|show=W3|name=I }}{{TreeButton|show=W3|name=O }}{{TreeButton|show=W3|name=P }}<br>
{{TreeButton|show=W3|name=A }}{{TreeButton|show=W3|name=S }}{{TreeButton|show=W3|name=D }}{{TreeButton|show=W3|name=F }}{{TreeButton|show=W3|name=G }}{{TreeButton|show=W3|name=H }}{{TreeButton|show=W3|name=J }}{{TreeButton|show=W3|name=K }}{{TreeButton|show=W3|name=L }}<br>
{{TreeButton|show=W3|name=Z }}{{TreeButton|show=W3|name=X }}{{TreeButton|show=W3|name=C }}{{TreeButton|show=W3|name=V }}{{TreeButton|show=W3|name=B }}{{TreeButton|show=W3|name=N }}{{TreeButton|show=W3|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv R3" style="display:none;">
{{TreeButton|show=W4|name=Q }}{{TreeButton|show=W4|name=W }}{{TreeButton|show=W4|name=E }}{{TreeButton|show=W4|name=R }}{{TreeButton|show=W4|name=T }}{{TreeButton|show=W4|name=Y }}{{TreeButton|show=W4|name=U }}{{TreeButton|show=W4|name=I }}{{TreeButton|show=W4|name=O }}{{TreeButton|show=W4|name=P }}<br>
{{TreeButton|show=W4|name=A }}{{TreeButton|show=W4|name=S }}{{TreeButton|show=W4|name=D }}{{TreeButton|show=W4|name=F }}{{TreeButton|show=W4|name=G }}{{TreeButton|show=W4|name=H }}{{TreeButton|show=W4|name=J }}{{TreeButton|show=W4|name=K }}{{TreeButton|show=W4|name=L }}<br>
{{TreeButton|show=W4|name=Z }}{{TreeButton|show=W4|name=X }}{{TreeButton|show=W4|name=C }}{{TreeButton|show=W4|name=V }}{{TreeButton|show=W4|name=B }}{{TreeButton|show=W4|name=N }}{{TreeButton|show=W4|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv R4" style="display:none;">
{{TreeButton|show=W5|name=Q }}{{TreeButton|show=W5|name=W }}{{TreeButton|show=W5|name=E }}{{TreeButton|show=W5|name=R }}{{TreeButton|show=W5|name=T }}{{TreeButton|show=W5|name=Y }}{{TreeButton|show=W5|name=U }}{{TreeButton|show=W5|name=I }}{{TreeButton|show=W5|name=O }}{{TreeButton|show=W5|name=P }}<br>
{{TreeButton|show=W5|name=A }}{{TreeButton|show=W5|name=S }}{{TreeButton|show=W5|name=D }}{{TreeButton|show=W5|name=F }}{{TreeButton|show=W5|name=G }}{{TreeButton|show=W5|name=H }}{{TreeButton|show=W5|name=J }}{{TreeButton|show=W5|name=K }}{{TreeButton|show=W5|name=L }}<br>
{{TreeButton|show=W5|name=Z }}{{TreeButton|show=W5|name=X }}{{TreeButton|show=W5|name=C }}{{TreeButton|show=W5|name=V }}{{TreeButton|show=W5|name=B }}{{TreeButton|show=W5|name=N }}{{TreeButton|show=W5|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv R5" style="display:none;">
{{TreeButton|show=W6|name=Q }}{{TreeButton|show=W6|name=W }}{{TreeButton|show=W6|name=E }}{{TreeButton|show=W6|name=R }}{{TreeButton|show=W6|name=T }}{{TreeButton|show=W6|name=Y }}{{TreeButton|show=W6|name=U }}{{TreeButton|show=W6|name=I }}{{TreeButton|show=W6|name=O }}{{TreeButton|show=W6|name=P }}<br>
{{TreeButton|show=W6|name=A }}{{TreeButton|show=W6|name=S }}{{TreeButton|show=W6|name=D }}{{TreeButton|show=W6|name=F }}{{TreeButton|show=W6|name=G }}{{TreeButton|show=W6|name=H }}{{TreeButton|show=W6|name=J }}{{TreeButton|show=W6|name=K }}{{TreeButton|show=W6|name=L }}<br>
{{TreeButton|show=W6|name=Z }}{{TreeButton|show=W6|name=X }}{{TreeButton|show=W6|name=C }}{{TreeButton|show=W6|name=V }}{{TreeButton|show=W6|name=B }}{{TreeButton|show=H6|name=N }}{{TreeButton|show=W6|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv R6" style="display:none;">
{{TreeButton|show=W7|name=Q }}{{TreeButton|show=W7|name=W }}{{TreeButton|show=W7|name=E }}{{TreeButton|show=W7|name=R }}{{TreeButton|show=W7|name=T }}{{TreeButton|show=W7|name=Y }}{{TreeButton|show=W7|name=U }}{{TreeButton|show=W7|name=I }}{{TreeButton|show=W7|name=O }}{{TreeButton|show=W7|name=P }}<br>
{{TreeButton|show=W7|name=A }}{{TreeButton|show=W7|name=S }}{{TreeButton|show=W7|name=D }}{{TreeButton|show=W7|name=F }}{{TreeButton|show=W7|name=G }}{{TreeButton|show=W7|name=H }}{{TreeButton|show=W7|name=J }}{{TreeButton|show=W7|name=K }}{{TreeButton|show=W7|name=L }}<br>
{{TreeButton|show=W7|name=Z }}{{TreeButton|show=W7|name=X }}{{TreeButton|show=W7|name=C }}{{TreeButton|show=W7|name=V }}{{TreeButton|show=W7|name=B }}{{TreeButton|show=W7|name=N }}{{TreeButton|show=W7|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

##可往后添加更多位数密码##

正确密码部分，根据第2位-倒数第二位密码进行修改，把对应字母的“show=W(n)”修改为“show=R(n)”

最后一位正确密码修改为“show=P0”

示例：

密码第n位，正确字母为h

<span class="lw-treediv W(n-1)" style="display:none;"> {{TreeButton|show=Wn|name=Q }}{{TreeButton|show=Wn|name=W }}{{TreeButton|show=Wn|name=E }}{{TreeButton|show=Wn|name=R }}{{TreeButton|show=Wn|name=T }}{{TreeButton|show=Wn|name=Y }}{{TreeButton|show=Wn|name=U }}{{TreeButton|show=Wn|name=I }}{{TreeButton|show=Wn|name=O }}{{TreeButton|show=Wn|name=P }}<br> {{TreeButton|show=Wn|name=A }}{{TreeButton|show=Wn|name=S }}{{TreeButton|show=Wn|name=D }}{{TreeButton|show=Wn|name=F }}{{TreeButton|show=Wn|name=G }}{{TreeButton|show=Rn|name=H }}{{TreeButton|show=Wn|name=J }}{{TreeButton|show=Wn|name=K }}{{TreeButton|show=Wn|name=L }}<br> {{TreeButton|show=Wn|name=Z }}{{TreeButton|show=Wn|name=X }}{{TreeButton|show=Wn|name=C }}{{TreeButton|show=Wn|name=V }}{{TreeButton|show=Wn|name=B }}{{TreeButton|show=Wn|name=N }}{{TreeButton|show=Wn|name=M }}{{TreeButton|show=W0|name=Cancel}} </span>

<span class="lw-treediv W1" style="display:none;">
{{TreeButton|show=W2|name=Q }}{{TreeButton|show=W2|name=W }}{{TreeButton|show=W2|name=E }}{{TreeButton|show=W2|name=R }}{{TreeButton|show=W2|name=T }}{{TreeButton|show=W2|name=Y }}{{TreeButton|show=W2|name=U }}{{TreeButton|show=W2|name=I }}{{TreeButton|show=W2|name=O }}{{TreeButton|show=W2|name=P }}<br>
{{TreeButton|show=W2|name=A }}{{TreeButton|show=W2|name=S }}{{TreeButton|show=W2|name=D }}{{TreeButton|show=W2|name=F }}{{TreeButton|show=W2|name=G }}{{TreeButton|show=W2|name=H }}{{TreeButton|show=W2|name=J }}{{TreeButton|show=W2|name=K }}{{TreeButton|show=W2|name=L }}<br>
{{TreeButton|show=W2|name=Z }}{{TreeButton|show=W2|name=X }}{{TreeButton|show=W2|name=C }}{{TreeButton|show=W2|name=V }}{{TreeButton|show=W2|name=B }}{{TreeButton|show=W2|name=N }}{{TreeButton|show=W2|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv W2" style="display:none;">
{{TreeButton|show=W3|name=Q }}{{TreeButton|show=W3|name=W }}{{TreeButton|show=W3|name=E }}{{TreeButton|show=W3|name=R }}{{TreeButton|show=W3|name=T }}{{TreeButton|show=W3|name=Y }}{{TreeButton|show=W3|name=U }}{{TreeButton|show=W3|name=I }}{{TreeButton|show=W3|name=O }}{{TreeButton|show=W3|name=P }}<br>
{{TreeButton|show=W3|name=A }}{{TreeButton|show=W3|name=S }}{{TreeButton|show=W3|name=D }}{{TreeButton|show=W3|name=F }}{{TreeButton|show=W3|name=G }}{{TreeButton|show=W3|name=H }}{{TreeButton|show=W3|name=J }}{{TreeButton|show=W3|name=K }}{{TreeButton|show=W3|name=L }}<br>
{{TreeButton|show=W3|name=Z }}{{TreeButton|show=W3|name=X }}{{TreeButton|show=W3|name=C }}{{TreeButton|show=W3|name=V }}{{TreeButton|show=W3|name=B }}{{TreeButton|show=W3|name=N }}{{TreeButton|show=W3|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv W3" style="display:none;">
{{TreeButton|show=W4|name=Q }}{{TreeButton|show=W4|name=W }}{{TreeButton|show=W4|name=E }}{{TreeButton|show=W4|name=R }}{{TreeButton|show=W4|name=T }}{{TreeButton|show=W4|name=Y }}{{TreeButton|show=W4|name=U }}{{TreeButton|show=W4|name=I }}{{TreeButton|show=W4|name=O }}{{TreeButton|show=W4|name=P }}<br>
{{TreeButton|show=W4|name=A }}{{TreeButton|show=W4|name=S }}{{TreeButton|show=W4|name=D }}{{TreeButton|show=W4|name=F }}{{TreeButton|show=W4|name=G }}{{TreeButton|show=W4|name=H }}{{TreeButton|show=W4|name=J }}{{TreeButton|show=W4|name=K }}{{TreeButton|show=W4|name=L }}<br>
{{TreeButton|show=W4|name=Z }}{{TreeButton|show=W4|name=X }}{{TreeButton|show=W4|name=C }}{{TreeButton|show=W4|name=V }}{{TreeButton|show=W4|name=B }}{{TreeButton|show=W4|name=N }}{{TreeButton|show=W4|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv W4" style="display:none;">
{{TreeButton|show=W5|name=Q }}{{TreeButton|show=W5|name=W }}{{TreeButton|show=W5|name=E }}{{TreeButton|show=W5|name=R }}{{TreeButton|show=W5|name=T }}{{TreeButton|show=W5|name=Y }}{{TreeButton|show=W5|name=U }}{{TreeButton|show=W5|name=I }}{{TreeButton|show=W5|name=O }}{{TreeButton|show=W5|name=P }}<br>
{{TreeButton|show=W5|name=A }}{{TreeButton|show=W5|name=S }}{{TreeButton|show=W5|name=D }}{{TreeButton|show=W5|name=F }}{{TreeButton|show=W5|name=G }}{{TreeButton|show=W5|name=H }}{{TreeButton|show=W5|name=J }}{{TreeButton|show=W5|name=K }}{{TreeButton|show=W5|name=L }}<br>
{{TreeButton|show=W5|name=Z }}{{TreeButton|show=W5|name=X }}{{TreeButton|show=W5|name=C }}{{TreeButton|show=W5|name=V }}{{TreeButton|show=W5|name=B }}{{TreeButton|show=W5|name=N }}{{TreeButton|show=W5|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv W5" style="display:none;">
{{TreeButton|show=W6|name=Q }}{{TreeButton|show=W6|name=W }}{{TreeButton|show=W6|name=E }}{{TreeButton|show=W6|name=R }}{{TreeButton|show=W6|name=T }}{{TreeButton|show=W6|name=Y }}{{TreeButton|show=W6|name=U }}{{TreeButton|show=W6|name=I }}{{TreeButton|show=W6|name=O }}{{TreeButton|show=W6|name=P }}<br>
{{TreeButton|show=W6|name=A }}{{TreeButton|show=W6|name=S }}{{TreeButton|show=W6|name=D }}{{TreeButton|show=W6|name=F }}{{TreeButton|show=W6|name=G }}{{TreeButton|show=W6|name=H }}{{TreeButton|show=W6|name=J }}{{TreeButton|show=W6|name=K }}{{TreeButton|show=W6|name=L }}<br>
{{TreeButton|show=W6|name=Z }}{{TreeButton|show=W6|name=X }}{{TreeButton|show=W6|name=C }}{{TreeButton|show=W6|name=V }}{{TreeButton|show=W6|name=B }}{{TreeButton|show=W6|name=N }}{{TreeButton|show=W6|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

<span class="lw-treediv W6" style="display:none;">
{{TreeButton|show=W7|name=Q }}{{TreeButton|show=W7|name=W }}{{TreeButton|show=W7|name=E }}{{TreeButton|show=W7|name=R }}{{TreeButton|show=W7|name=T }}{{TreeButton|show=W7|name=Y }}{{TreeButton|show=W7|name=U }}{{TreeButton|show=W7|name=I }}{{TreeButton|show=W7|name=O }}{{TreeButton|show=W7|name=P }}<br>
{{TreeButton|show=W7|name=A }}{{TreeButton|show=W7|name=S }}{{TreeButton|show=W7|name=D }}{{TreeButton|show=W7|name=F }}{{TreeButton|show=W7|name=G }}{{TreeButton|show=W7|name=H }}{{TreeButton|show=W7|name=J }}{{TreeButton|show=W7|name=K }}{{TreeButton|show=W7|name=L }}<br>
{{TreeButton|show=W7|name=Z }}{{TreeButton|show=W7|name=X }}{{TreeButton|show=W7|name=C }}{{TreeButton|show=W7|name=V }}{{TreeButton|show=W7|name=B }}{{TreeButton|show=W7|name=N }}{{TreeButton|show=W7|name=M }}{{TreeButton|show=W0|name=Cancel}}</span>

##可往后添加更多位数密码##

错误密码的协助演出部分，不需要修改，如果密码大于7位，则参考第n位密码代码进行添加：

第n位密码代码

<span class="lw-treediv W(n-1)" style="display:none;"> {{TreeButton|show=Wn|name=Q }}{{TreeButton|show=Wn|name=W }}{{TreeButton|show=Wn|name=E }}{{TreeButton|show=Wn|name=R }}{{TreeButton|show=Wn|name=T }}{{TreeButton|show=Wn|name=Y }}{{TreeButton|show=Wn|name=U }}{{TreeButton|show=Wn|name=I }}{{TreeButton|show=Wn|name=O }}{{TreeButton|show=Wn|name=P }}<br> {{TreeButton|show=Wn|name=A }}{{TreeButton|show=Wn|name=S }}{{TreeButton|show=Wn|name=D }}{{TreeButton|show=Wn|name=F }}{{TreeButton|show=Wn|name=G }}{{TreeButton|show=Wn|name=H }}{{TreeButton|show=Wn|name=J }}{{TreeButton|show=Wn|name=K }}{{TreeButton|show=Wn|name=L }}<br> {{TreeButton|show=Wn|name=Z }}{{TreeButton|show=Wn|name=X }}{{TreeButton|show=Wn|name=C }}{{TreeButton|show=Wn|name=V }}{{TreeButton|show=Wn|name=B }}{{TreeButton|show=Wn|name=N }}{{TreeButton|show=Wn|name=M }}{{TreeButton|show=W0|name=Cancel}} </span>

其中，每一位字母中的“show=Wn”中的n请替换为该位密码的位数，第一行中“"lw-treediv W(n-1)"”中的(n-1)替换为密码位数-1

<div class="lw-treediv R0" style="display:none;" >
##在此处添加最终显示的内容##
</div>

添加最终显示的内容于此，不支持添加标题

这是一个示例（密码为phigros）

Enter password:
[ _{_ _ _ _ _ _ _} ]

Enter password:
[ _{* _ _ _ _ _ _} ]

Enter password:
[ _{* * _ _ _ _ _} ]

Enter password:
[ _{* * * _ _ _ _} ]

Enter password:
[ _{* * * * _ _ _} ]

Enter password:
[ _{* * * * * _ _} ]

Enter password:
[ _{* * * * * * _} ]

[ U N L O C K E D ]

CONTINUE⇒

[ACCESS DENIED]

RETRY

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

Q W E R T Y U I O P 
A S D F G H J K L 
Z X C V B N M Cancel

显示内容