Get几个小技能——悬浮音乐播放器、字体压缩和打印效果

本文链接：https://blog.csdn.net/qq_42038623/article/details/106032423

悬浮音乐播放器的使用

之前也使用过悬浮音乐播放器，但是是在自己的个人博客中使用的，但如果想要在自己做的网页中如何使用悬浮音乐播放器呢？
试用过了很多的方法，没有找到好用的悬浮音乐播放器的源码，最后使用了以下这个方达，感觉效果真的很不错！

首先是要在这个网站上注册一个账号
https://player.lmih.cn/
然后就可以进入后台页面管理自己的音乐播放器
在后台创建一个播放器
在后台创建一个歌单
歌单由于不是vip不能直接导入歌单，但可以自己自由的添加歌曲。

支持网易云音乐、QQ音乐、酷狗音乐、咪咕音乐
可以在播放器设置里面进行个性设置

注意：如果在线下本地使用这个音乐播放器的话可以使用，如果需要用在云部署的网站，需要给出绑定的域名。
然后直接可以获取播放器的引入代码，就可以直接生成悬浮播放器了
实现效果如下
给出一个样例代码

<!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
压缩步骤：