让代码动起来

胡子同志98418
1,877 阅读8分钟

这是一篇流水账，记录了用代码诞生太极的过程。

一、准备工具

  • 这个代码用的是VS Code，然后呢用到了parcel
  • Parcel是一个Web应用程序打包程序，其开发人员经验与众不同。它利用多核处理提供了极快的性能，并且需要零配置。
  • 搞一点小东西，确定我们的服务可以启起来

二、让字动起来

（1）首先让一个字动起来

  • document.querySelector通过CSS选择器找到这个元素
  • innerHTML属性设置或获取HTML语法表示的元素的后代。

  • 当前代码是这样的，我们要让“1”过段时间换成“2”，可以用setTimeout
    代码再这里就做了一个很大的突破了，我们可以让字动起来了。

（2）更多字动起来

  • 让“1”变成“2”实现之后试着让“1”变成更大的数字，加一个中间变量n，记住当前数值，进行+1变化

  • setTimeout只会生效一次，所以这段代码也只是让“1”变成“2”，可以把setTimeout换成setInterval

  • 用setTimeout实现和setInterval一样的功能

    • 使用setTimeout的好处就是可以随时停止 这里，n+1=11，n=10，那n=11的时候，输出就会是undefind，换成一个数组看一下（让n作为一个下标）

（3）让一串的字出现

n多加了1，开始修改，调试

那我这里直接判断n+1就好了

  • 这里可不可以不要一个一个往外蹦，而是把数组的0-n渐次显示出来呢可以使用substring
    • substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

最后一个字显示不出来了，那就再把刚刚if里的+1删掉好了


那这里就可以让一段话显示出来了，下一步就是看看能不能让我们的代码显示出来

三、添加样式

（1）添加样式到文本里

没有换行

（2）换行

1）尝试换行

  • 使用replace()方法把回车换成HTML里的换行
    • replace() 方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。

  • 好像没有生效，把字符串打出来看看

charCodeAt可以得出字符的编码

  • 依次试试每个字符到底是啥东西，再看我们的效果，发现第一个换行生效了

  • 这里的replace只能生效一次，就用到了正则表达式

  • 这里在动的时候发现每一次换行都会出现一个<，是因为字符是一个一个出现的，当<出现，并不能识别是换行，当出现b表示是一个标签，才会继续替换成换行

2）解决<

思路：之前说因为不能快速识别是一个HTML标签才会出现<的问题，那可不可以把整个换行<br>四个字符整体替换呢

再弄一个空的数组，每次都把string的值添加过来，在添加的过程中做个手脚，直接加换行，而不是加字符

  • 又发现一个新的问题，在最后又出现了undefined这个+1的老问题

3）再次解决“+1”

上面把n改成了-1，因为“0”的工作没人做了，就需要n做出一些妥协，那n从-1开始，n就多一个值，所以这里直接判断n+1

我是这么想的，不管对不对吧，我的代码目前为止运行没问题呀

4）缩进

我的代码有缩进，显示没有缩进

这里用到的是转义字符

（3）样式生效

1）样式生效

思考一个问题，这里可以写div的内容，那可不可以把style的内容放进去呢

首先测试一下，在HTML里放一个style

在js里拿到这个style

生效了

2）内容生效

我们测试过，style是可以生效的，那可不可以把要显示的代码同时放到HTML和CSS里面，那HTML显示的时候样式也同时有了。

这里发现在CSS里也是HTML的转义

3）取消转义

这里就换到我们之前研究过的substring，就可以了

然后，样式还是没哟生效

4）添加注释

中文影响到了代码

添加注释之后同步生效

四、做个太极

（1）准备div

首先准备一个div，可以事先在HTML里准备好

<div id="div1"></div>

（2）定位

把图形放在合适的位置，这段代码不想显示，所以放在了CSS里

（3）变圆

  • 加阴影 box-shadow属性用于在元素的框架上添加阴影效果。
    语法：
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

加阴影是给太极加一个灰色不明显的边框

（4）阴阳相成

变成黑白双色，可以使用两个div，但是这里不用，这里用了背景渐变CSS gradient background generator 通过渐变直接把背景色设置为黑白双色

（5）画鱼点睛

  • 加两个圆，变成双鱼，这里同样没有用div，而是用了CSS伪元素，相当于span，有了伪元素就可以不写div了，把伪元素变成块级元素就相当于div了
#div1::before {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 50%;
}

#div1::after {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    border-radius: 50%;
}

这段代码是加了两个圆圈，设置了一般的大小，然后添加了定位，让背景的两个半圆呈现双鱼的形状

  • 加两个鱼眼睛，不能div::before::before，可以使用div，但是这里还是用了背景渐变，换成镜像渐变就可以了
#div1::before {
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
}
#div1::after {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
}

五、调整

  • 自动滚动
    代码到了页面最下方不会自动滚动，需要手动向上滚动才能看到最后的代码 添加JS代码，自己搜索调试 window.scrollTo(0,9999);

  • 自动换行
    有些代码太长，不会自动换行，当屏幕宽度缩小时后半句代码就看不到了

#html {
    word-break: break-all;
}
  • 适应手机

    • 手机页面很窄很长，左右结构放不下，让它在手机页面上下结构显示，可以使用媒体查询。当屏幕宽度小于500时生效

    • 设置高度

    • 消除定位

    • 修改大小

    • 高度冲突（本来在JS里就设置高度了，现在媒体查询又加了高度，导致太极是个很高的椭圆），这时需要HTML做出妥协，外面再加一个div，所有的CSS都要修改

    • 上半部分加滚动条，让代码只在上半部分显示（设置滚动时把overflow:auto;写成了overflow:hidden;导致代码不能上下滚动查看了

    • 太极居中

    • 页面可以上下滚动，需要CSSreset！

    • 手机版的meta是错的，直接抄大厂（手指头在怎么乱动都不会随意放大缩小了）

这里堆的图片有点多，但是我太懒了，我不想整理了，将就看吧，对了，我还要再放一张图片，什么是页面可以随意乱动，就是CSSreset之前的效果 这里文字出现的时候会自动隐藏半行，整个屏幕可以上下滑动

  • 还有其他看着哪里不顺眼就给它改改

六、部署到GitHub

最后一步就是部署到GitHub

  • git init //初始化
  • git status //查看上传列表
  • .gitignore //把不想上传的东西隐藏起来
  • parcel build src/index.html --public fuck //‘fuck’调试法，
    • 这一句很重要，有新的变动都执行一下，（我都是为了你好，很烦，但是！）
    • 解决在GitHub上dist运行不了的问题
    • 这一步会新搞出来一个node_module的文件，好多乱七八糟的东西，记得把它隐藏起来
    • 在放到.gitignore的时候切记不要是git add进行时，（嗯~我就这么干了，然后搞了一堆乱七八糟我看不懂的东西，这是一句忠告）
  • git add . //添加到上传列表
  • git commit //上传备注
  • git push //新建仓库，上传就好了
-----------------添加的内容----------------------------

七、旋转起来

这个是看到别人的效果，受到的启发，添加了animation动画，让太极图进行一个旋转

坑

这里我加了一个transform的旋转，当时运行在电脑端没有问题，但移动端发现最后的时候飘了

  • 这里是因为我定位时也使用了transform，动画效果最后生效时把之前定位时的给覆盖掉了。
    • 解决方法一：把旋转动画效果放在父元素上，结果就是电脑显示有点魔性
    • 解决方法二：直接把div1Wrapper变成一个flex容器，然后居中，就不需要transform来居中，也就没有冲突的问题了
    • 解决方法三：在移动端再加上一些东西，让动画的transform和居中的transform同时生效

最后放一个预览效果，我是部署到了GitHub，初次加载会慢一点 点击预览

最后的最后一定要每次修改都要运行parcel build src.html --public-url fuck

文本展示代码直接放到<pre id = code></pre>标签就可以了，换行什么的都可以保留 就不需要那个if...else了 就是放文本(demo)的 div 换成 pre

avatar
文章
阅读
粉丝