《华为音乐播放器项目》——4.歌词滚动完成+上传

短命女 2022-02-05 02:23 342阅读 0赞

效果预览连接：[https://70kg111.github.io/HUAWEI-MUSIC/dist/index.html][https_70kg111.github.io_HUAWEI-MUSIC_dist_index.html]

电脑打开的话请选择手机预览，不然分辨率有问题，会很难看。

可以看里面的代码及注释，应该都写的比较清楚：[https://github.com/70kg111/HUAWEI-MUSIC][https_github.com_70kg111_HUAWEI-MUSIC]

**最后面一部分的歌词滚动代码是c v 过来的**，说实话，我写不出来。

**小插曲：**

我在把这个项目上传到 github 时，设置好 GitHub Pages 后打开：[https://70kg111.github.io/HUAWEI-MUSIC/index.html][https_70kg111.github.io_HUAWEI-MUSIC_index.html]

**提示报错：** Failed to load resource: the server responded with a status of 404 ()  
![在这里插入图片描述][20190504142953813.png]  
看到这里应该是指的路径错误，导致 css文件，js文件并未加载出来

**原因：**

后面去问了别人才知道在本地能够顺利打开的，本地在写代码时多了一个 npx parcel index.html 的步骤  
这样会生成一个 [http://loacalhots:1234][http_loacalhots_1234] ，写代码的时候也是在这个网站上看页面效果  
这相当于一个测试的服务器，但 github 上并没有这个过程，所以会报错

**解决办法：**

一、因为所有的文件其实都已经上传到 dist 目录下了，所以可以直接将 dist 这个文件夹单独拎出来作为一个项目上传到 github 上，然后设置 GitHub Pages 预览 dist/index.html 即可。

二、也可以将原本项目内的 dist 文件下 index.html 中引入 css，js 文件的目录改掉，因为 dist 文件夹下的内容其实是被 npx parcel build index.html 之后才生成的。  
所以直接引入原始文件夹的 css ，js 文件，然后设置 GitHub Pages 预览 dist/index.html 即可，如下图：  
![在这里插入图片描述][20190504143756837.png]

[https_70kg111.github.io_HUAWEI-MUSIC_dist_index.html]: https://70kg111.github.io/HUAWEI-MUSIC/dist/index.html
[https_github.com_70kg111_HUAWEI-MUSIC]: https://github.com/70kg111/HUAWEI-MUSIC
[https_70kg111.github.io_HUAWEI-MUSIC_index.html]: https://70kg111.github.io/HUAWEI-MUSIC/index.html
[20190504142953813.png]: /images/20220205/5254a4e10faa48cc93832f5f62dbfa9f.png
[http_loacalhots_1234]: http://loacalhots:1234
[20190504143756837.png]: /images/20220205/aa58afdd74f64ecc8523ee0b786e8011.png