食用教程

后台添加页面，选择组件自定义html，将下方代码复制填入即可，不需要选择模板

演示效果：

点我前往

代码

<div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-green" data-isclose="false" role="alert"><strong><qc style="color:#ef0c7e;background:undefined">温馨提示：</qc></strong><qc style="color:#333;background:undefined"><strong>输入你的抖音昵称或者评论，点击生成，然后复制生成得到的字体即可直接使用。</strong></qc></div></div>






  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
.youname{width: 100%; height: 37px; border: none; box-shadow: 1px 1px 3px #584d69; border-radius: 2px; margin-bottom: 20px; margin-top: 20px; outline: none; padding-left: 10px; box-sizing: border-box; line-height: 37px; font-size: 16px;} .apptitle{font-size: 24px; color: #ffffff; font-weight: bold; text-shadow: 2px 2px 2px #fd2a2a; font-style: italic;} .button1{padding: .75rem; background-image: linear-gradient(to bottom right,rgba(255,255,255,.2),rgba(255,255,255,.01)); box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.1); background-color: #dc3545!important; border: none; width: 100%; color: #ffffff; border-radius: 2px; outline: none;} .result{width: 100%; height: 80px; border: none; box-shadow: 1px 1px 3px #584d69; border-radius: 2px; outline: none; box-sizing: border-box; background-color: #ffffff; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 24px;}
.apptitle {
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 2px #fd2a2a;
    font-style: italic;
}
  </style>


  <div class="doc">
    <input placeholder="请输入抖音昵称，例如：源日记QIUMO" id="youname" class="youname">
    <div class="result" id="result"></div>
    <button class="button1" onclick="ok()">点击生成</button>
  </div>
<!--wp-compress-html--><!--wp-compress-html no compression-->
  <script>
    const baseText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    const LowerCase = ['?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?']
    const UpperCase = ['?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?']
    function ok() {
      var input = document.getElementById('youname')
      var result = ''
      for (var i of input.value) {
        if (/[A-Za-z]/.test(i)) {
          var index = baseText.indexOf(i.toLocaleUpperCase())
          if (/[a-z]/.test(i)) {
            result += UpperCase [index]
          } else {
            result += LowerCase[index]
          }
        } else {
          result += i
        }
      }
      document.getElementById('result').innerText = result
    }
  </script>
<!--wp-compress-html--><!--wp-compress-html no compression-->





<p> </p>



<p> </p>



<p> </p>



<p> </p>