悬浮音乐播放器的使用
之前也使用过悬浮音乐播放器，但是是在自己的个人博客中使用的，但如果想要在自己做的网页中如何使用悬浮音乐播放器呢？
试用过了很多的方法，没有找到好用的悬浮音乐播放器的源码，最后使用了以下这个方达，感觉效果真的很不错！
1. 首先是要在这个网站上注册一个账号
https://player.lmih.cn/
然后就可以进入后台页面管理自己的音乐播放器
2. 在后台创建一个播放器
3. 在后台创建一个歌单
歌单由于不是vip不能直接导入歌单，但可以自己自由的添加歌曲。
支持网易云音乐、QQ音乐、酷狗音乐、咪咕音乐
4. 可以在播放器设置里面进行个性设置
注意：如果在线下本地使用这个音乐播放器的话可以使用，如果需要用在云部署的网站，需要给出绑定的域名。
5. 然后直接可以获取播放器的引入代码，就可以直接生成悬浮播放器了
6. 实现效果如下
给出一个样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<script src="https://player.lmih.cn/player/js/player.js" id="myhk" key="158904220953" m="1"></script>
</body>
</html>
确实是非常方便实用
字体打印效果
第一种：使用字符串切割，函数回调
- 实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width:100%; margin:0px auto">
<pre id="language_one" style=" color:#F93; font-size:20px; font-family:华文行楷"></pre>
<div style="display:none;" id="language_two">
我要一个一个的出现，我要一个一个的出，我要一个一个的出。
我要一个一个的出现，我要一个一个的出，我要一个一个的出。
我要一个一个的出现，我要一个一个的出，我要一个一个的出。
我要一个一个的出现，我要一个一个的出，我要一个一个的出。
我要一个一个的出现，我要一个一个的出，我要一个一个的出。
</div>
</div>
<script language="javascript">
var index=0;
var word=document.getElementById("language_two").innerHTML;
function type(){
document.getElementById("language_one").innerText = word.substring(0,index++);
}
setInterval(type, 100);
</script>
</body>
</html>
- 实现效果如下
第二种：在jQuery上挂载一个原型
方法还是字符串切割
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="keyword" content="">
<meta name="description" content="">
</head>
<style>
@font-face {
font-family: myfont;
src: url('./fonts/蜜桃小公举字体.ttf');
}
.autotype{
color:#F93;
font-size:20px;
font-family:"myfont";
}
</style>
<body>
<div class="autotype" id="autotype">
<p>世界那么大</p>
<p>唯你貌美如花</p>
<p>唯你完美无瑕</p>
<p>送给我最爱的女人</p>
<br>
<p>妈妈，儿子一直爱你</p>
<p>爱你，我只能这样表达</p>
<p>无法可修饰的一双手</p>
<p>带出温暖永远在背后</p>
<p>纵使啰嗦始终关注</p>
<p>是你多么温馨的目光</p>
<p>教我坚毅望着前路</p>
</div>
<script src="http://file2.ci123.com/ast/js/jquery_172.js"></script>
<script>
$.fn.autotype = function () {
var $text = $(this);
// console.log('this', this);
var str = $text.html();
var index = 0;
var x = $text.html('');
var timer = setInterval(function () {
var current = str.substr(index, 1);
if (current == '<') {
index = str.indexOf('>', index) + 1;
} else {
index++;
}
$text.html(str.substring(0, index) + (index & 1 ? '_' : ''));
if (index >= str.length) {
clearInterval(timer);
}
}, 100);
};
$("#autotype").autotype();
</script>
</body>
</html>
实现效果如下
第二种实现的打印效果相对更和谐一点
字体压缩
使用了外部引入的好看的字体文件，然后就有了这样的一个问题，如果将引入了字体文件的html源码部署到了服务器上，那这个页面加载起来就会非常的慢，因为这个引入的外部字体文件就有3M~4M。那要如何解决这样的问题呢。
使用字蛛按需压缩字体文件
字蛛官网：http://font-spider.org/
参考文档：https://blog.csdn.net/weixin_36336604/article/details/77191144
压缩步骤：
1. 需要安装 node.js
2. 输入以下命令： npm install font-spider -g
注意：需要使用管理员权限打开命令框，然后再全局安装
3. 安装成功后就可以使用字蛛的命令
font-spider *.html
示例：压缩上面的引入字体文件
结果如下
* 这是压缩前的字体文件（大小3M多）
* 压缩后的字体文件（大小30KB）
使用字蛛压缩后，效果非常明显
总结
这些都是再昨天搞了一天的一个网页中用到的：
http://mother.qkongtao.cn/
这是自己制作的一个小网页送给我最亲爱的妈妈！
祝天下所有的母亲，母亲节快乐！！！