HTMLElement自定义标签实现盲文密码效果代码-html代码-BFW代码库

HTMLElement自定义标签实现盲文密码效果代码

代码语言：html

代码描述：HTMLElement自定义标签实现盲文密码效果代码，盲文由6个点位组成一个单元，每个点位可以是凸起的点（表示有）或空白（表示无）。通过不同的点组合，可以表示字母、数字、标点符号等。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
        margin: 0;
        color-scheme: light dark;
        color: light-dark(hsl(0 0% 10%), hsl(0 0% 92%));
        background: light-dark(hsl(0 0% 97%), hsl(0 0% 12%));

        min-block-size: 100svb;
        display: flex;
        braille-cipher {
                color: light-dark(hsl(0 0% 20%), hsl(0 0% 60%));
                display: block;
                inline-size: 100%;
                max-inline-size: 20rem;
                margin: auto;
        }
}
</style>



  
  
</head>

<body translate="no">
  <braille-characters></braille-characters>

<braille-cipher text="abcde|fghij|klmno|pqrst|uvwxy|z . ,"></braille-cipher>
  
      <script >
class BrailleCharacters extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<svg style="display: none;" viewBox="-1.5 -1 17 29.5">
<defs>
<circle id="dot-o" r="0.35" fill="currentColor" />
<circle id="dot-x" r="0.35" fill="currentColor" fill-opacity="0.2" />
<symbol id="letter-a" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-x" x="1" /><use href="#dot-x" y="1" /><use href="#dot-x" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-b" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-x" x="1" /><use href="#dot-o" y="1" /><use href="#dot-x" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-c" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-o" x="1" /><use href="#dot-x" y="1" /><use href="#dot-x" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-d" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-o" x="1" /><use href="#dot-x" y="1" /><use href="#dot-o" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-e" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-x" x="1" /><use href="#dot-x" y="1" /><use href="#dot-o" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-f" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-o" x="1" /><use href="#dot-o" y="1" /><use href="#dot-x" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-g" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-o" x="1" /><use href="#dot-o" y="1" /><use href="#dot-o" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-h" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-o" /><use href="#dot-x" x="1" /><use href="#dot-o" y="1" /><use href="#dot-o" x="1" y="1" /><use href="#dot-x" y="2" /><use href="#dot-x" x="1" y="2" />
</symbol>
<symbol id="letter-i" viewBox="-0.5 -0.5 2 3">
  <use href="#dot-x" /><use href="#dot-o" x="1" /><use href="#dot-o" y=.........完整代码请登录后点击上方下载按钮下载查看