我输入，你生成代码，手写代码生成
文章目录
- 先写个打字特效
- 借助Vue完成变量的替换
因为之前觉得这个打字特效很好玩，但是字数不一样就要重写或者改代码，麻烦，之前就看到网上有一些自动生成代码的工具，很好奇怎么实现的？于是我就想能不能自己也写一个自动生成代码的网页，别光想，戴上耳机，音乐陪伴，行动起来，30分钟，完成了下面的300行代码，实现了这个功能，通过这个，你大概就能理解一些所谓简单复杂的工具，其实也不过如此，你也可以
先写个打字特效
首先先写一个固定字长的打字特效，这就很easy了，思路就是使用
ch单位，1ch表示一个字长，再借助等宽字体，开局宽度0ch，动画过渡到字长，借助伪元素实现打字时的小横杠，这里使用了 css 变量，因为方便后期对变量的替换以及维护，推荐
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>typoratitle>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://img.fy6b.com/2022/04/26/f8fd03d60efd6.png" type="image/x-icon">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--Length: 6ch;
--num: 6;
--Time: 3s;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
position: relative;
font-size: 60px;
font-family: monospace;
width: 0ch;
overflow: hidden;
white-space: nowrap;
animation: Lengthen var(--Time) steps(var(--num)) forwards;
}
p::after {
content: "";
position: absolute;
right: 0;
width: 2px;
height: 100%;
background-color: #454545;
animation: Flash 1s infinite;
}
@keyframes Lengthen {
to {
width: var(--Length);
}
}
@keyframes Flash {
50% {
background-color: transparent;
}
}
style>
head>
<body>
<p>typorap>
body>
html>
借助Vue完成变量的替换
接下来就是重点了，这里我使用了Vue框架，更快速点，原生js一样的，重点是获取css变量，根据输入的length为css变量从新赋值，然后通过字符串拼接，完成代码的重用，可能很笨，但说起来只能这样，哈哈，还有就是点击复制这个实现，通过input框，这里切记不要使用display隐藏input，而是使用opacity = 进行隐藏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线生成打字特效title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://zhouql.vip/images/ali/键盘,打字.png" type="image/x-icon">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
:root {
--Length: 24ch;
--num: 24;
--Time: 4s;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.inputText {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
margin: 15px auto;
}
input {
outline: none;
width: calc(100% - 90px);
height: 40px;
text-indent: .3em;
font-size: 14px;
font-family: "Microsoft YaHei UI Light";
letter-spacing: .1em;
border: 1px solid #69F;
border-right: transparent;
border-radius: 5px 0 0 5px;
}
button {
border: none;
background-color: #69F;
height: 40px;
width: 90px;
color: #FFF;
letter-spacing: .1em;
padding: 5px;
font-size: 16px;
border-radius: 0 5px 5px 0;
cursor: pointer;
outline: none;
font-family: "Microsoft YaHei UI Light";
}
.code {
position: relative;
width: 90%;
height: 30px;
background-color: transparent;
overflow: auto;
}
p {
position: relative;
font-size: 20px;
font-family: monospace;
width: 0ch;
overflow: hidden;
white-space: nowrap;
animation: Lengthen var(--Time) steps(var(--num)) forwards;
}
p::after {
content: "";
position: absolute;
right: 0;
width: 2px;
height: 100%;
background-color: #454545;
animation: Flash 1s infinite;
}
@keyframes Lengthen {
to {
width: var(--Length);
}
}
@keyframes Flash {
50% {
background-color: transparent;
}
}
.co {
position: relative;
width: 90%;
height: calc(100vh - 250px);
overflow: auto;
border: 1px solid pink;
}
.co .copyButton {
position: absolute;
width: 80px;
height: 30px;
border-radius: 0px;
top: 5px;
right: 8px;
font-size: 13px;
}
.preView {
width: 90%;
display: inline-block;
text-align: left;
padding: 10px 1px;
font-size: 15px;
color: #555;
}
footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
}
footer span {
font-size: 12px;
color: #999;
}
footer span a {
text-decoration: none;
color: #008600;
}
[v-clock] {
display: none;
}
style>
head>
<body>
<div id="app">
<div class="inputText">
<input autofocus @input="cleanCode" maxlength="28" type="text" placeholder="输入字" v-model="typing">
<button @click="generateCode">生成代码button>
div>
<span class="preView" v-show="flag">预览span>
<div class="code" v-show="flag">
<p>{{zi}}p>
div>
<span class="preView viewCode" v-show="flag">源码span>
<div class="co" v-show="flag">
<button class="copyButton" @click="copyCode">点击复制button>
<pre>
<code v-cloak id="copyCodeAll">
{{daziCode}}
code>
pre>
div>
<input type="text" class="preCopyCode" style="opacity: 0;">
<footer>
<span>学习使用，豫备案号 <a href="https://seo.chinaz.com/zhouql.vip">zhouql.vipa>span>
footer>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
//要打的字
typing: 'I Love You zhang yu miao',
//决定显示还是隐藏
flag:false,
zi: '',
//待复制的代码
preCopyCode:''
},
computed: {
daziCode() {
return '\n' +
'\n' +
'\n' +
'\n' +
' \n' +
' '</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>typing<span class="token operator">+</span><span class="token string">' \n' +
' \n' +
' \n' +
' \n' +
' \n' +
'\n' +
'\n' +
''
+this.typing+'\n' +
'\n' +
'\n'
}
},
methods: {
generateCode() {
this.zi = this.typing;
document.documentElement.style.setProperty("--Length", (this.typing.length) + 'ch');
document.documentElement.style.setProperty("--num", this.typing.length + "");
document.documentElement.style.setProperty("--Time", this.typing.length * 0.4 + "s");
if (this.typing.length != 0) {
this.flag = true;
}
},
cleanCode() {
this.flag = false;
this.typing = this.typing.replace(/[^a-zA-Z .() 0-9;:""?{}=+-]/g, '');
},
copyCode() {
let code = document.querySelector(".preCopyCode");
code.value = this.daziCode;
code.select();
document.execCommand("Copy");
alert("复制成功")
}
}
})
script>
body>
html>