js实现单词变长生成器代码

代码语言:html

所属分类:其他

代码描述:js实现单词变长生成器代码,输入一个单子比如long text,数量输入5,就会变成looooong teeeeext

代码标签: js 单词 变长 生成器

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

<!DOCTYPE html>

<html lang="en">

<head>




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
        * {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          padding: 0;
          background-color: #3598DC;

          background-size: cover;
          font-size: 15px;
        }
        
        .container {
          display: grid;
          place-items: center;
          min-height: 100vh;
        }
        .container #longTextForm {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          font-family: "Poppins", sans-serif;
          grid-gap: 15px;
          position: relative;
          font-size: 1rem;
          padding: 15px;
          background: #FFF;
          width: 500px;
          margin: auto;
          box-shadow: 0.2em 0.2em 2em #0008;
          border-radius: 10px;
        }
        .container #longTextForm::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 50px;
  
          border-radius: 10px 10px 0 0;
        }
        .container #longTextForm #title {
          grid-row: 1;
          font-weight: bold;
          font-size: 1.1rem;
          color: #FFF;
          z-index: 5;
        }
        .container #longTextForm #description {
          grid-row: 2;
          font-size: 0.9rem;
          color: #000A;
        }
        .container #longTextForm #inputText, .container #longTextForm #inputNumber {
          background-color: #F2F2F2;
          font-size: 1rem;
          padding: 8px;
          border: none;
          outline: none;
        }
        .container #longTextForm #inputText {
          grid-row: 3;
        }
        .container #longTextForm #inputNumber {
          grid-row: 4;
        }
        .container #longTextForm #submitButton {
          grid-row: 5;
          padding: 8px;
          font-family: "Poppins", sans-serif;
          border: none;
          outline: none;
          background-color: #FF3A56;
          color: #FFF;
        }
        .container #longTextForm #submitButton:hover {
          cursor: p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0