项目 找不到index_【项目】会动的米老鼠

构想

• 希望实现一个会动的可爱卡通人物。（CSS动画）
• 代码和效果图同时展现。（JS）

效果链接

第一步，简易动画

mickey​xiahuijun.top

第二步，滚动代码与动画同时展示

test​xiahuijun.top

遇见的问题

第一个问题

点击不了按钮等现象

原因：css里使用了z-index调整上下层的位置，所以会影响到浏览器渲染的各个部分。点击不了按钮说明有其他的东西在按钮的上面，覆盖住了按钮。

措施：查看各个部分的z-index，看看有没有覆盖住按钮的。或者直接简单粗暴的将按钮的z-index调至很大。

第二个问题

上传至远程仓库后，原代码的效果出现问题了，（我这是test.html里有style标签）test.html内标签的CSS样式没有效果。

原因：放置在body标签下的style标签被删除了。我之前用的是parcel上传到远程仓库的，所以可能是工具自动帮我删除了。

措施：将style标签抽离成css文件，html里link引入该文件。

第三个问题

在解决了第二个问题之后，第三个问题又出现了。

test.e98b79dd.js:1 Failed to load resource: the server responded with a status of 404 ()

原因：说明浏览器找不到这个js文件，这里以Chrome浏览器为例，点进network查看一下访问路径，会发现是错的。

措施:

第一步

parcel build src/test.html /*测试文件的文件名*/ --public-url fuck

第二步，打开该文件，看fuck出现在哪里，我们就需要改哪里

parcel build src/test.html --public-url .

第三步，改完重新上传到github上面，这里需要注意的是，不要着急，可能要过一会才生效。所以，需要等一会再重新打开链接。

收获

• 从确立动画人物，到简易实现，再逐步完善，中间不断的生成bug，再修复bug。我觉得代码真的很神奇，有一种“给我一台电脑，我能创造世界”的感觉。
• 本项目运用了大量的CSS和JS，让我更加深刻理解了他们。
• 在完成项目的过程中，不断优化代码，逐步实现模化块。

本文章第一次发布于语雀

【项目】会动的米老鼠 · 语雀​www.yuque.com