备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

我输入，你生成代码，手写代码生成

2022-04-29 156
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 我输入，你生成代码，手写代码生成

文章目录


先写个打字特效


借助Vue完成变量的替换


image.png

点击查看原视频链接


因为之前觉得这个打字特效很好玩，但是字数不一样就要重写或者改代码，麻烦，之前就看到网上有一些自动生成代码的工具，很好奇怎么实现的？于是我就想能不能自己也写一个自动生成代码的网页，别光想，戴上耳机，音乐陪伴，行动起来，30分钟，完成了下面的300行代码，实现了这个功能，通过这个，你大概就能理解一些所谓简单复杂的工具，其实也不过如此，你也可以🏄🏼


先写个打字特效


首先先写一个固定字长的打字特效，这就很easy了，思路就是使用 ch单位，1ch表示一个字长，再借助等宽字体，开局宽度 0ch ，动画过渡到字长，借助伪元素实现打字时的小横杠，这里使用了 css 变量，因为方便后期对变量的替换以及维护，推荐👍🏼


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>typora</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="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>typora</p>
</body>
</html>

1.gif


借助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.vip</a></span>
    </footer>
</div>
<!--引入Vue2-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--创建Vue实例对象-->
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            //要打的字
            typing: 'I Love You zhang yu miao',
            //决定显示还是隐藏
            flag:false,
            zi: '',
            //待复制的代码
            preCopyCode:''
        },
        computed: {
            daziCode() {
                return '\n' +
                    '<!DOCTYPE html>\n' +
                    '<html lang="en">\n' +
                    '<head>\n' +
                    '    <meta charset="UTF-8">\n' +
                    '    <title>'+this.typing+'</title>\n' +
                    '    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n' +
                    '    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
                    '    <link rel="shortcut icon" href="https://img.fy6b.com/2022/04/26/f8fd03d60efd6.png" type="image/x-icon">\n' +
                    '    <style>\n' +
                    '        * {\n' +
                    '            margin: 0;\n' +
                    '            padding: 0;\n' +
                    '            box-sizing: border-box;\n' +
                    '        }\n' +
                    '\n' +
                    '        :root {\n' +
                    '            --Length: '+this.typing.length+'ch;\n' +
                    '            --num: '+this.typing.length+';\n' +
                    '            --Time: '+(this.typing.length * 0.5)+'s;\n' +
                    '        }\n' +
                    '\n' +
                    '        body {\n' +
                    '            display: flex;\n' +
                    '            align-items: center;\n' +
                    '            justify-content: center;\n' +
                    '            min-height: 100vh;\n' +
                    '        }\n' +
                    '\n' +
                    '        p {\n' +
                    '            position: relative;\n' +
                    '            font-size: 60px;\n' +
                    '            font-family: monospace;\n' +
                    '            width: 0ch;\n' +
                    '            overflow: hidden;\n' +
                    '            white-space: nowrap;\n' +
                    '            animation: Lengthen var(--Time) steps(var(--num)) forwards;\n' +
                    '        }\n' +
                    '\n' +
                    '        p::after {\n' +
                    '            content: "";\n' +
                    '            position: absolute;\n' +
                    '            right: 0;\n' +
                    '            width: 2px;\n' +
                    '            height: 100%;\n' +
                    '            background-color: #454545;\n' +
                    '            animation: Flash 1s infinite;\n' +
                    '        }\n' +
                    '\n' +
                    '        @keyframes Lengthen {\n' +
                    '            to {\n' +
                    '                width: var(--Length);\n' +
                    '            }\n' +
                    '        }\n' +
                    '\n' +
                    '        @keyframes Flash {\n' +
                    '            50% {\n' +
                    '                background-color: transparent;\n' +
                    '            }\n' +
                    '        }\n' +
                    '    </style>\n' +
                    '</head>\n' +
                    '<body>\n' +
                    '<p>'+this.typing+'</p>\n' +
                    '</body>\n' +
                    '</html>\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>


文章标签：
JavaScript
前端开发
gslyqscwne7vc
目录
相关文章
Star时光
|
4月前
|
设计模式 算法 前端开发
有什么可以减少注释，但依然能让他人看得懂代码的方法吗？
有什么可以减少注释，但依然能让他人看得懂代码的方法吗？
Star时光
30 0
logic德尔
|
4月前
|
Java
注释之背后：代码的解释者与保护者
注释之背后：代码的解释者与保护者
logic德尔
21 0
海拥
|
4月前
|
索引 Python
Python 程序的输出 | 第十一套（异常处理）
Python 程序的输出 | 第十一套（异常处理）
海拥
26 0
配电网和matlab
|
9月前
|
程序员
相见恨晚的Matlab编程小技巧(2)-代码怎么做到逻辑清晰？——巧用注释符“%“
        本文将以教程的形式详细介绍Matlab中两个常用符号“%”和“%%”的作用。初学者可以通过此文掌握这两个符号的用法，为Matlab编程打下坚实的基础。
配电网和matlab
281 0
炒茄子O
|
9月前
|
C语言 Python
Python: 1027 打印沙漏_分析题干为主要目的+测试点2原因
Python: 1027 打印沙漏_分析题干为主要目的+测试点2原因
炒茄子O
96 0
waynaqua
|
10月前
|
程序员
什么是好代码/坏代码？给普通人的图解示例
什么是好代码/坏代码？给普通人的图解示例
waynaqua
79 0
有一只柴犬
|
存储 Java
无聊小知识.04 以下代码会输出什么？
今天同事给我看了一段代码，然后这段简单的代码，我却陷入了沉思。
有一只柴犬
67 0
无聊小知识.04 以下代码会输出什么？
把苹果咬哭的测试笔记
|
开发框架 缓存 监控
测试是否有必要看开发代码？如何能看懂？
测试是否有必要看开发代码？如何能看懂？
把苹果咬哭的测试笔记
178 0
Lux_Sun
|
Web App开发 XML JSON
程序人生 - 开发程序不写代码，而是靠拼图？
程序人生 - 开发程序不写代码，而是靠拼图？
Lux_Sun
178 0
程序人生 - 开发程序不写代码，而是靠拼图？
清风Python
|
Java 程序员 Linux
Python仅用3行代码就能输出花式字符串图集，同事直呼666！
相信Java程序员看到上面的图，一定不会陌生。没错，springboot的启动日志。不知道其他人怎么想，我第一次看到这个启动日志的时候，就觉得好炫酷。然而，大家在日常的Python开发中，日志打印的却枯燥无比。今天就来教大家打印出让同事羡慕，却让领导崩溃的代码输出。
清风Python
359 0

热门文章

最新文章

  • 1
    理解事务的4种隔离级别
  • 2
    疑犯追踪第一季/全集Person Of Interest迅雷下载
  • 3
    简单实用的数据建模工具PDManer
  • 4
    详细讲解！Canal+Kafka实现MySQL与Redis数据同步！
  • 5
    71.7. Script for automatic startup on boot
  • 6
    关于Oracle客户端显示乱码问题
  • 7
    PHPWAMP站点管理的“域名模式”和“端口模式”详解、均支持自定义
  • 8
    jsHelper
  • 9
    学校里学不到的东西(一)
  • 10
    Python 3 教程一:入门
  • 1
    Python的装饰器
    59
  • 2
    R语言用潜类别混合效应模型(Latent Class Mixed Model ,LCMM)分析老年痴呆年龄数据
    59
  • 3
    数据分享|R语言用logistic逻辑回归和AFRIMA、ARIMA时间序列模型预测世界人口
    55
  • 4
    【视频】马尔可夫链蒙特卡罗方法MCMC原理与R语言实现|数据分享（下）
    50
  • 5
    【视频】马尔可夫链蒙特卡罗方法MCMC原理与R语言实现|数据分享（上）
    65
  • 6
    数据分享|数据探索电商平台用户行为流失可视化分析
    63
  • 7
    电商平台数据可视化分析网红零食销量
    52
  • 8
    R语言线性回归模型拟合诊断异常值分析家庭燃气消耗量和卡路里实例带自测题
    45
  • 9
    数据分享|R语言GLM广义线性模型：逻辑回归、泊松回归拟合小鼠临床试验数据（剂量和反应）示例和自测题
    54
  • 10
    数据分享|R语言逻辑回归、线性判别分析LDA、GAM、MARS、KNN、QDA、决策树、随机森林、SVM分类葡萄酒交叉验证ROC（下）
    65

    • 相关电子书

    更多
  • 《0代码搭应用》
  • 不止代码
  • Python第五讲——关于爬虫如何做js逆向的思路
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）