AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

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

文章目录


先写个打字特效


借助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时光
|
9月前
|
设计模式 算法 前端开发
有什么可以减少注释，但依然能让他人看得懂代码的方法吗？
有什么可以减少注释，但依然能让他人看得懂代码的方法吗？
Star时光
70 0
是谢添啊
|
算法 定位技术
连连看核心算法与基本思想（附全部项目代码链接与代码详细注释）
连连看核心算法与基本思想（附全部项目代码链接与代码详细注释）
是谢添啊
488 0
阿飞&yen;
|
人机交互 C语言
c语言实现三子棋（思路+项目展示+源代码）
c语言实现三子棋（思路+项目展示+源代码）
阿飞&yen;
132 0
配电网和matlab
|
程序员
相见恨晚的Matlab编程小技巧(2)-代码怎么做到逻辑清晰？——巧用注释符“%“
        本文将以教程的形式详细介绍Matlab中两个常用符号“%”和“%%”的作用。初学者可以通过此文掌握这两个符号的用法，为Matlab编程打下坚实的基础。
配电网和matlab
1007 0
炒茄子O
|
C语言 Python
Python: 1027 打印沙漏_分析题干为主要目的+测试点2原因
Python: 1027 打印沙漏_分析题干为主要目的+测试点2原因
炒茄子O
145 0
有一只柴犬
|
存储 Java
无聊小知识.04 以下代码会输出什么？
今天同事给我看了一段代码，然后这段简单的代码，我却陷入了沉思。
有一只柴犬
106 0
无聊小知识.04 以下代码会输出什么？
柳鲲鹏
编程基本功：做自解释的测试文档
编程基本功：做自解释的测试文档
柳鲲鹏
67 0
编程基本功：做自解释的测试文档
傲娇的萌
|
前端开发 JavaScript vr&ar
前端面试-代码输出结果篇
前端面试-代码输出结果篇
傲娇的萌
330 0
前端歌谣
|
前端开发
前端工作总结131-优化项目的代码显示名字
前端工作总结131-优化项目的代码显示名字
前端歌谣
115 0
前端工作总结131-优化项目的代码显示名字
前端歌谣
|
前端开发 JavaScript
前端工作总结231-读懂每行代码
前端工作总结231-读懂每行代码
前端歌谣
100 0
前端工作总结231-读懂每行代码

热门文章

最新文章

  • 1
    解决kafka集群由于默认的__consumer_offsets这个topic的默认的副本数为1而存在的单点故障问题
  • 2
    oracle 11g 11204补丁信息
  • 3
    Python 命令行之旅：初探 docopt
  • 4
    时间之箭源于量子纠缠？
  • 5
    输入输出流体系图
  • 6
    Windows Server 2008 R2下部署OCS 2007 R2 边缘服务器
  • 7
    从码农到设计者，从单例模式入手设计代码
  • 8
    瑞典力推储能助太阳能发电计划落实
  • 9
    十张图告诉你互联网发展的八大趋势
  • 10
    第7周-任务3-复数模板类
  • 1
    DeepSeek——DeepSeek模型部署实战
    129
  • 2
    基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证
    105
  • 3
    基于电导增量MPPT控制算法的光伏发电系统simulink建模与仿真
    29
  • 4
    基于排队理论的客户结账等待时间MATLAB模拟仿真
    44
  • 5
    3天功能开发→3小时：通义灵码2.0+DEEPSEEK实测报告，单元测试生成准确率92%的秘密
    63
  • 6
    Sentinel监测到了服务，但是实时监控不显示曲线图，应该怎么解决这个问题？
    47
  • 7
    通义灵码 2.0 体验报告：AI 赋能智能研发的新范式
    61
  • 8
    通义灵码 2.0 体验报告：AI 赋能智能研发的新范式
    80
  • 9
    类和对象的简述（c++篇）
    48
  • 10
    模拟实现c++中的vector模版
    38

    • 相关课程

    更多
  • 5天玩转Java面向对象编程
  • Java面向对象编程
  • Java面向对象开发

    • 相关电子书

    更多
  • Python第五讲——关于爬虫如何做js逆向的思路
  • 《0代码搭应用》
  • 不止代码

    • 相关实验场景

    更多
  • 使用Java面向对象编写网络通信程序应用
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型