写点什么

「趣学前端」给不懂技术的朋友简单演示,代码是怎么被编写出来的

作者:叶一一
  • 2022-10-15
    北京
  • 本文字数:1132 字

    阅读完需:约 1 分钟

「趣学前端」给不懂技术的朋友简单演示,代码是怎么被编写出来的

灵感来源

我的家人和身边非程序员的朋友们,对我的工作多多少少带点好奇心。尤其是家人学会使用智能手机,应用程序千千万,七彩界面迷人眼。这当中,总有某块功能是前端开发写出来的,比如某个小程序,比如某个登录界面,比如某个动画效果。

于是我准备给不懂技术的朋友演示一下,登录的时候,那个输入账号的框框是怎么做到的。

手把手教学,一对一服务,只讲怎么写,不讲基础知识点。喜欢搭积木,是不必知道生产商是怎么把积木制造出来的。一键复制粘贴,熟悉的那个功能就出来了。


功能实现

  • 左侧是可选的功能列表,包含本次所有可查看代码的功能;

  • 右上是选择的功能展示;

  • 右下是选择的功能代码展示,展示采用 IDE 风格,含复制代码功能。


image


实现代码回显

itemClick = function show(type) {  let titleObj = {    text: '姓名 :',    radio: '性别 :',    checkbox: '爱好 :',    select: '早餐 :',    textarea: '留言 :',    link: '新闻 :',  };  let item = rightBottomArea[type];  let itemTitle = titleObj[type];  rightHeadTitle.innerHTML = itemTitle;  rightHeadForm.innerHTML = item;  rightBottom.style.display = 'block';  rightBottomForm.innerHTML = item;  copyText = item;};
复制代码

复制功能

复制功能就一个创建新元素、元素赋值、赋值、移除元素的过程。

  • 使用 document 的 createElement 方法可以创建 html 元素;首先创建一个 input 元素;

  • 为 body 添加这个 input 元素;

  • 将要复制的内容赋值给 input 元素;

  • 选中 input 元素中的所有内容;

  • 使用 document 的 execCommand 方法进行拷贝当前选中内容到剪贴板;

  • 移除 input 元素。

function copy() {  // copy word  if (copyText) {    let transfer = document.createElement('input');    document.body.appendChild(transfer);    transfer.value = copyText;    transfer.focus();    transfer.select();    if (document.execCommand('copy')) {      document.execCommand('copy');    }    transfer.blur();    document.body.removeChild(transfer);    alert('已复制!');  }}
复制代码

操作演示

功能完成之后,我开始给我的朋友演示如何操作获取一段代码块。

第一步

选中一个想查看代码的功能项,比如性别(单选按钮)。


image


第二步

将查看的功能的代码进行复制。


image


第三步

将代码粘贴到一个空档 html 文档中。


image


第四步

邮件这个新建的 html 文档,选择在浏览器中运行,刚才的单选功能就出来在页面中啦。


image


后续

我给我的朋友演示了一下,我的怨种朋友惊叹原来编程这么简单,她跃跃欲试转变当兴趣班学一下,盲目自信的她没有发现我看她的目光是多么的意味深长。

正所谓:

一入前端深似海,学完这个学那个。

轮子造了千千万,到头只是个入门。

看完开发者大会,发现又要整活了。

欲知何谓大前端,新出特性了解下。

发布于: 刚刚阅读数: 2
用户头像

叶一一

关注

掘金优秀创作者 2022-09-01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「趣学前端」给不懂技术的朋友简单演示,代码是怎么被编写出来的_JavaScript_叶一一_InfoQ写作社区