js实现单词变长生成器代码
代码语言:html
所属分类:其他
代码描述:js实现单词变长生成器代码,输入一个单子比如long text,数量输入5,就会变成looooong teeeeext
下面为部分代码预览,完整代码请点击下载或在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