蓝蓝站点

博客

发表于 更新于 分类于 ， ， ， Waline： 本文字数： 3.2k 阅读时长 ≈ 3 分钟

注册讯飞账号

略

实名认证

略

创建应用

这里有一张图片
这里有一张图片

添加语音合成服务

进入控制台,点击我的应用,然后添加语音合成服务(免费),并记下APPID
这里有一张图片

下载SDK

点击应用右侧的SDK下载
这里有一张图片
这里有一张图片
你将会下载到一个压缩包:
这里有一张图片

解压下载到的SDK压缩包

应用到Java项目

创建一个Java项目,然后把压缩包中的lib目录下的的所有东西全部复制粘贴到这个Java项目中：
这里有一张图片
然后把jar包添加到build path中:
这里有一张图片
到这里项目就搭建好了,下面来创建测试类。

创建测试类

1 设置合成监听器

在测试类中粘贴如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1 设置合成监听器
static SynthesizeToUriListener synthesizeToUriListener = new SynthesizeToUriListener()
{
    // progress为合成进度0~100
    public void onBufferProgress(int progress)
    {
    }
    // 会话合成完成回调接口
    // uri为合成保存地址，error为错误信息，为null时表示合成会话成功
    public void onSynthesizeCompleted(String uri, SpeechError error)
    {
    }
    @Override
    public void onEvent(int arg0, int arg1, int arg2, int arg3, Object arg4,
            Object arg5)
    {
        // TODO Auto-generated method stub
    }
};

设置好监听器之后，下面就可来合成并下载音频了。

编写main方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public static void main(String[] args)
{
    // 2 将“XXXXXXXX”替换成您申请的APPID
    SpeechUtility.createUtility(SpeechConstant.APPID + "=XXXXXXXX");
    // 3.创建SpeechSynthesizer对象
    SpeechSynthesizer mTts = SpeechSynthesizer.createSynthesizer();
    // 4.合成参数设置，详见《MSC Reference Manual》SpeechSynthesizer 类
    // 设置发音人
    mTts.setParameter(SpeechConstant.VOICE_NAME, "xiaoyu");
    // 设置语速，范围0~100
    mTts.setParameter(SpeechConstant.SPEED, "50");
    // 设置语调，范围0~100
    mTts.setParameter(SpeechConstant.PITCH, "50");
    // 设置音量，范围0~100
    mTts.setParameter(SpeechConstant.VOLUME, "50");
    // 5设置要合成的文本
    String text="测试语音合成";
    // 6.开始合成 //设置合成音频保存位置（可自定义保存位置），默认保存在“./tts_test.pcm”
    mTts.synthesizeToUri(text, "./tts_test.pcm",
            synthesizeToUriListener);
}

完整下载Java demo如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package demo;
import com.iflytek.cloud.speech.SpeechConstant;
import com.iflytek.cloud.speech.SpeechError;
import com.iflytek.cloud.speech.SpeechSynthesizer;
import com.iflytek.cloud.speech.SpeechUtility;
import com.iflytek.cloud.speech.SynthesizeToUriListener;
public class DownloadDemo
{
    public static void main(String[] args)
    {
        // 2 将“XXXXXXXX”替换成您申请的APPID
        SpeechUtility.createUtility(SpeechConstant.APPID + "=5c80ae6b");
        // 3.创建SpeechSynthesizer对象
        SpeechSynthesizer mTts = SpeechSynthesizer.createSynthesizer();
        // 4.合成参数设置，详见《MSC Reference Manual》SpeechSynthesizer 类
        // 设置发音人
        mTts.setParameter(SpeechConstant.VOICE_NAME, "xiaoyu");
        // 设置语速，范围0~100
        mTts.setParameter(SpeechConstant.SPEED, "50");
        // 设置语调，范围0~100
        mTts.setParameter(SpeechConstant.PITCH, "50");
        // 设置音量，范围0~100
        mTts.setParameter(SpeechConstant.VOLUME, "50");
        // 5设置要合成的文本
        String text = "测试语音合成";
        // 6.开始合成 //设置合成音频保存位置（可自定义保存位置），默认保存在“./tts_test.pcm”
        mTts.synthesizeToUri(text, "./tts_test.pcm", synthesizeToUriListener);
    }
    // 1 设置合成监听器
    static SynthesizeToUriListener synthesizeToUriListener = new SynthesizeToUriListener()
    {
        // progress为合成进度0~100
        public void onBufferProgress(int progress)
        {
        }
        // 会话合成完成回调接口
        // uri为合成保存地址，error为错误信息，为null时表示合成会话成功
        public void onSynthesizeCompleted(String uri, SpeechError error)
        {
        }
        @Override
        public void onEvent(int arg0, int arg1, int arg2, int arg3, Object arg4,
                Object arg5)
        {
            // TODO Auto-generated method stub
        }
    };
}

运行上面程序即可合成测试语音合成这个音频信息,保存在./tts_test.pcm中,不过这个文件好像不可直接打开播放,我用audition打开

用audition cs6 打开

采样率选择16000,其他默认,然后就可以播放了,如果播放的声音跟猪叫差不多的话，那应该是采样率错了，反正采样率多测试几次下就好了
这里有一张图片
语音合成的地方肯定有些合成的不如意的地方,可以在audition中再次编辑,然后保存为mp3等等即可，这样以后就可直接播放了。

发表于 更新于 分类于 ， ， Waline： 本文字数： 828 阅读时长 ≈ 1 分钟

希腊字母顺序表

序号 大写 小写 英文 读音
1 $A$ $\alpha$ alpha
2 $B$ $\beta$ beta
3 $\Gamma$ $\gamma$ gamma
4 $\Delta$ $\delta$ delta
5 $E$ $\epsilon$ epsilon
6 $Z$ $\zeta$ zeta
7 $H$ $\eta$ eta
8 $\Theta$ $\theta$ theta
9 $I$ $\iota$ iota
10 $K$ $\kappa$ kappa
11 $\Lambda$ $\lambda$ lambda
12 $M$ $\mu$ mu
13 $N$ $\nu$ nu
14 $\Xi$ $\xi$ xi
15 $O$ $\omicron$ omicron
16 $\Pi$ $\pi$ pi
17 $P$ $\rho$ rho
18 $\Sigma$ $\sigma$ sigma
19 $T$ $\tau$ tau
20 $\Upsilon$ $\upsilon$ upsilon
21 $\Phi$ $\phi$ phi
22 $X$ $\chi$ chi
23 $\Psi$ $\psi$ psi
24 $\Omega$ $\omega$ omega

参考资料

https://baike.baidu.com/item/%E5%B8%8C%E8%85%8A%E5%AD%97%E6%AF%8D/4428067?fr=aladdin#2_1

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

mathjax公式添加删除线

使用\require{cancel}声明,来允许片段删除线 的显示,即写成如下形式:

1
2
3
4
$$
\require{cancel}
......
$$

声明片段删除线后，使用如下代码:

  • \cancel{字符}斜线(/)、
  • \bcancel{字符}反斜线(\)、
  • \xcancel{字符}打叉(x)
  • \cancelto{字符}带箭头斜线

例子

1
2
3
4
5
6
7
8
9
10
11
$$
\require{cancel}
\begin{array}{rl}
\verb|y+\cancel{x}| & y+\cancel{x}\\
\verb|\cancel{y+x}| & \cancel{y+x}\\
\verb|y+\bcancel{x}| & y+\bcancel{x}\\
\verb|y+\xcancel{x}| & y+\xcancel{x}\\
\verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x}\\
\verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\
\end{array}
$$

显示效果：
$$
\require{cancel}
\begin{array}{rl}
\verb|y+\cancel{x}| & y+\cancel{x}\\
\verb|\cancel{y+x}| & \cancel{y+x}\\
\verb|y+\bcancel{x}| & y+\bcancel{x}\\
\verb|y+\xcancel{x}| & y+\xcancel{x}\\
\verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x}\\
\verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\
\end{array}
$$

参考资料

https://blog.csdn.net/qq_30717203/article/details/81139708#t29

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

已经有了有大佬开发了置顶插件了，安装插件，然后在front-matter中配置一下就好了

卸载hexo-generator-index插件

hexo站点目录下，输入下面命令卸载插件

1
npm uninstall hexo-generator-index --save

安装hexo-generator-index-pin-top插件

hexo站点目录下，输入下面命令安装插件

1
npm install hexo-generator-index-pin-top --save

添加front-matter配置项

在需要置顶的文章的Front-matter中加上top: true即可实现文章置顶功能。

重新部署

1
hexo clean &&hexo s

这样就可以看到置顶的文章了，但是还没有显示置顶标签，下面来添加置顶标识。

添加置顶标识

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到<div class="post-meta">标签，在该标签下面，插入如下代码：

1
2
3
4
5
6
7
8
9
  <div class="post-meta">
<!-- 置顶插件添加 开始 -->
{% if post.top %}
     <font color="#1fa67a"><i class="fa fa-arrow-up"></i>
     <strong>Top</strong></font>
     <span class="post-meta-divider">|</span>
    {% endif %}
<!-- 置顶插件添加 结束 -->
 .........

如果显示出现了中文乱码,则把post.swig转为utf-8格式即可,转换步骤：全选post.swing中的内容,然后修改post.swing的编码为utf-8,然后粘贴到post.swing中,这样就修改了post.swing的编码格式了。
显示效果：
这里有一张图片

参考资料

插件github地址: https://github.com/netcan/hexo-generator-index-pin-top
开发插件的大佬的教程: http://www.netcan666.com/2015/11/22/解决Hexo置顶问题/
添加置顶图标教程: http://wangwlj.com/2018/01/09/blog_pin_post/
Hexo博客功能优化: https://www.itfanr.cc/2017/12/06/hexo-blog-optimization/#文章置顶
如何使用FrontAwesome图标

发表于 更新于 分类于 ， Waline： 本文字数： 319 阅读时长 ≈ 1 分钟

前言

结构体类型数据组就和我们平常定义的基本类型的数组一样，只不过是类型变了。

基本类型数组动态分配大小

1
int* a = (int*)malloc(sizeof(int)*10) ; //动态分配10个大小的int类型的内存空间

结构体类型数组分配大小

1
2
3
4
5
6
7
8
9
10
struct DIYDEFINE
{
    int a;
    char ch;
    long lnum;
};
//动态分配10个大小的结构体类型DIYDEFINE的内存空间。 
DIYDEFINE* pDiy = (DIYDEFINE*)malloc(sizeof(DIYDEFINE)*10); 
//最后不要忘了释放动态申请的内存空间
free(pDiy)；

参考链接

C语言中结构体数组的大小如何动态分配

发表于 更新于 分类于 ， Waline： 本文字数： 2.1k 阅读时长 ≈ 2 分钟

前言

markdown中可以插入html标签，所以可以插入audio标签来播放音频。

方式0 使用原生的audio播放音频

1
<audio src="https://fanyi.baidu.com/gettts?lan=en&text=focus&spd=5&source=web" controls="controls"></audio>

显示效果：

但是原生的audio标签控件太大了，占用文章太多空间,在电脑端，看起来还勉强凑合，但是在手机端的原生的audio控件会超出屏幕之外很不美观。所以我想着不用原生的audio,而是使用其他方式来打开音频。

方式1 使用javascript播放音频

1
2
3
4
5
6
7
8
9
10
11
<audio src="https://fanyi.baidu.com/gettts?lan=en&text=document&spd=3&source=web" id="audio0"></audio>
<input type="button" onclick="paly_audio0();" value="使用JS播放" />
<script>
    function paly_audio0() {
        //找到音频
        var audio0 = document.getElementById("audio0");
        if (audio0 != null) {
            audio0.play();
        }
    }
</script>

显示效果：


方式2 使用javascript播放音频 简写

1
2
<audio src="https://fanyi.baidu.com/gettts?lan=en&text=hello world&spd=3&source=web"  id="audio1"></audio>
<input type="button" onclick="document.getElementById('audio1').play();" value="播放"/>

这种方式，直接写在html中是可以播放的，但是写到在这里hexo 无法渲染。我用的是next主题，也不知道是hexo的原因，还是next主题的原因 。总之不要在文章中使用这种简写的方式就行了。

方式2 使用jquery播放音频

跟使用javascript方式，也可以使用jquery来播放：

1
2
3
4
5
6
7
8
9
10
11
12
<audio src="https://fanyi.baidu.com/gettts?lan=en&text=document&spd=3&source=web" id="documentAudio"></audio>
<input type="button" id="documentPlay" value="播放document" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#documentPlay').click(function () {
        //找到音频
        var documentAudio = document.getElementById('documentAudio');
        if (documentAudio != null) {
            documentAudio.play();
        }
    })
</script>

效果如下：


总结

还是直接使用javascript来播放音频的好，这样还少几行代码，也不用引入jqurey库。

发表于 更新于 分类于 ， Waline： 本文字数： 1.3k 阅读时长 ≈ 1 分钟

CSS设置下划线与文字间距距离(CSS文字下划线距离设置)

使用CSS单词介绍

  • padding-bottom——设置内容与对象下边框的距离
  • border-bottom——设置对象下边边框

读音

英文 读音
padding
border
bottom

实现过程

这里不是使用text-decoration下划线属性来实现的，而是使用底部边框属性border-bottom实现下划线一样效果，然后利用内底部边距padding-bottom设置下边框与文本的间距

CSS底部边框实现下划线效果

这里还是使用HTML <u> 标签来实现下划线，不过这里使用自己的样式:

  • 首先去掉自带的下线样式，
  • 然后用下边框实现下划线的效果，
  • 使用底部内边距设置下划线与文本的距离
1
2
3
4
5
6
7
/*定义html 下划线u的下划线样式*/
u {
/* 去掉原来的下划线样式 */
text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px solid #F00
}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下划线与文字距离改变 在线演示 Thinkcss</title>
    <style>
        /*定义html 下划线u的下划线样式*/
        u {
            /* 去掉原来的下划线样式 */
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 2px solid #F00
        }
    </style>
</head>
<body>
    <u>下划线</u>
</body>
</html>

显示效果：

下划线样式

参考链接

http://css5.com.cn/jiqiao/914.shtml

发表于 更新于 分类于 ， Waline： 本文字数： 4.5k 阅读时长 ≈ 4 分钟

html自动生成锚点

这里介绍使用id属性来设置锚点，并通过代码自动生成ID唯一的锚点。

根据ID属性跳转的锚点

html代码如下:

1
2
<a href="#AnchorPointID20181122184951">跳转到xxx</a>
<a id="AnchorPointID20181122184951"></a>

测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <meta charset="utf-8">
    <title>测试锚点</title>
</head>
<body>
    <a href="#AnchorPointID20181122184951">2</a>
    <script>
        for (var i = 0; i < 60; i++) {
            document.writeln("<br>");
        }
    </script>
    <a id="AnchorPointID20181122184951">1</a>
</body>
</html>

自动生成

上面的id是用代码自动生成的，因为id属性要求唯一，我总不能每次都想一个名字吧。

Java实现

生成唯一的数字串工具类

这里使用格式化时间字符串来生成的，代码如下,打包成一个类是为了后面使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package unique.id;
import java.text.SimpleDateFormat;
import java.util.Date;
public class UniqueIDString
{
    /**
     * 根据时间生成一个精确到秒数的唯一的ID字符串。
     * 时间一直往前走不可能有完全一样的时间点。
     * @return
     */
    public static String createUniqueID()
    {
        Date date=new Date();
        SimpleDateFormat format=new SimpleDateFormat("yyyyMMddHHmmss");
        return format.format(date);
    }
}

生成唯一锚点Java类

这个代码也很简单粗暴，直接通过字符串拼接即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package anchor.point;
import unique.id.UniqueIDString;
public class AnchorPoint
{
    public static void main(String[] args)
    {
        System.out.println(anchorPoint());
    }
    /**
     * 生成根据id属性跳转的html锚点标签对。
     * @return
     */
    public static String anchorPoint()
    {
        //根据时间生成一个唯一的id
        String id="AnchorPointID"+UniqueIDString.createUniqueID();
        String anchorLink="<a href=\"#"+id+"\"></a>\n";
        String anchorHTMLTag="<a id=\""+id+"\"></a>";
        return anchorLink+anchorHTMLTag;
    }
    /**
     * 生成根据id属性跳转的html锚点标签对，并指定超链接中的文本
     * @return
     */
    public static String anchorPoint(String text)
    {
        if(text==null)
        {
            return anchorPoint();
        }
        //根据时间生成一个唯一的id
        String id="AnchorPointID"+UniqueIDString.createUniqueID();
        String anchorLink="<a href=\"#"+id+"\">"+text+"</a>\n";
        String anchorHTMLTag="<a id=\""+id+"\"></a>";
        return anchorLink+anchorHTMLTag;
    }
}

javascript实现

也是很粗暴的代码

js 生成格式化字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function uniqueIdByFormatDate(date1) {
    var str = "";
    var year = date1.getFullYear();
    str += year;
    var month = date1.getMonth() + 1;//0-11
    if (month < 10)
        str += "0";
    str += month;
    var date = date1.getDate();//1-31
    if (date < 10)
        str += "0";
    str += date;
    var hour = date1.getHours() + 1;//0-59
    if (hour < 10)
        str += "0";
    str += hour;
    var moinute = date1.getMinutes() + 1;//0-59
    if (moinute < 10)
        str += "0";
    str += moinute;
    var second = date1.getSeconds() + 1;//0-59
    if (second < 10)
        str += "0";
    str += second;
//    console.log(str);
    return str;
}

拼接成html锚点链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function uniqueAnchorTags(text) {
    var date1 = new Date();
    var id = "AnchorIdPointID" + uniqueIdByFormatDate(date1);
    var anchorlink;
    if (text == null) {
        anchorlink = '<a href="#' + id + '></a>\n';
    }
    else {
        anchorlink = '<a href="#' + id + '>' + text + '</a>\n';
    }
    var anchorTag = '<a id="' + id + '></a>';
    console.log(anchorlink + anchorTag);
    return anchorlink + anchorTag;
}

最后添加上文本框，按钮

1
2
<textarea name="in_output" id="in_output" cols="100" rows="10"></textarea><br>
<input type="button" name="button1" id="button1" value="生成唯一锚点" onclick="output();">

以及事件处理函数，就可用了。

1
2
3
4
5
6
7
8
9
10
function output() {
    var in_output = document.getElementById("in_output");
    if (in_output.value == null) {
        in_output.value = uniqueAnchorTags(null);
    }
    else {
        in_output.value = uniqueAnchorTags(in_output.value);
    }
    console.log(in_output.value);
}

使用javascript的好处就是它可以在浏览器上运行，这样比较方便演示，效果如下:


发表于 更新于 分类于 ， Waline： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

语法

1
var patt=new RegExp(pattern,modifiers);

或更简单的方法

1
var patt=/pattern/modifiers;
  • pattern（模式） 描述了表达式的模式
  • modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

String对象中的正则表达式

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

  • search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串.
    • 如果找到就返回子串的起始位置。
    • 如果没找到就返回-1。
  • replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。返回的是替换后的文本。

match方法

match方法返回的是保存所有匹配正则表达式的子串的一个数组。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<p id="test">测试javascirpt String对象中的正则表达式 hello World</p>
<input type="button" onclick="setID20181128010217()" value="helloworld起始位置:">
<span id="20181128010217"></span>
<input type="button" onclick="setID20181128012951()" value="替换helloWorld:">
<span id="20181128012951"></span>
<script>
    // id="20181128010217" onclick="setID20181128010217()"
    function setID20181128010217() {
        var id = document.getElementById("20181128010217");
        var test = document.getElementById("test");
        var str = test.innerText;
        var start = str.search(/hello world/i);
        id.innerText = start;
    }
    // id="20181128012951" onclick="setID20181128012951()"
    function setID20181128012951() {
        var id = document.getElementById("20181128012951");
        var test = document.getElementById("test");
        test.innerText = test.innerText.replace(/hello world/i, "hello javascript");
    }
</script>

测试javascirpt String对象中的正则表达式 hello World

参考链接

JavaScript RegExp 对象
http://www.runoob.com/js/js-obj-regexp.html
http://www.runoob.com/js/js-regexp.html
http://www.runoob.com/jsref/jsref-obj-regexp.html
https://www.lansheng.net.cn/blog/f52e78d1/#search() 方法
https://www.lansheng.net.cn/blog/f52e78d1/#replace() 方法

发表于 更新于 分类于 ， Waline： 本文字数： 8k 阅读时长 ≈ 7 分钟

使用步骤

使用clipboard.js来可分为以下三个步骤：

  • 定义相关的html标签
  • 引入clisboard.js库，引入方式：
  • 实例化ClipboardJS对象
    • 实例化之后可以加上监听复制成功或失败。以便给用户一些提示信息。

属性说明

  • data-clipboard-text：复制的静态内容
  • data-clipboard-target：设置为其他元素的选择器，将复制该选择器中元素的内容
  • data-clipboard-action: 复制的方式，
    • data-clipboard-action=”copy” ：复制方式。默认
    • data-clipboard-action=”cut”: 剪切方式。

使用实例

使用的区别主要在引入方式和ClipboardJS对象的实例化上。

使用HTML DOM选择器实例化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-selector</title>
</head>
<body>
    <!-- 1.定义一些标签 -->
    <button class="btn" data-clipboard-text='静态文本1'>Copy</button>
    <button class="btn" data-clipboard-text='静态文本2'>Copy</button>
    <button class="btn" data-clipboard-text='静态文本3'>Copy</button>
    <!-- 2. 导入clipboard.min.js -->
    <!-- 通过cdn导入 -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!-- 导入本地 -->
   <!-- <script src="file:///E:\Blog\gongzuo\themes\next\source\js\src\clipboard.min.js"></script> -->
    <!-- 3. js中使用class选择器进行实例化 -->
    <script>
        //使用类选择器实例化,不可忽略
        var clipboard = new ClipboardJS('.btn');
        //监听事件给出提示,可忽略
        clipboard.on('success', function (e) {
            alert("复制成功");
        });
        clipboard.on('error', function (e) {
            alert("复制失败");
        });
    </script>
</body>
</html>

点击按钮会把data-clipboard-text这个属性的值文本复制到剪贴板中，这种方式使用无复制静态的文本。

使用HTML元素实例化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-node</title>
</head>
<body>
    <!-- 1. Define some markup -->
    <div id="btn" data-clipboard-text='静态文本'>
        <span>Copy</span>
    </div>
    <!-- 2. Include library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new ClipboardJS(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

使用html元素列表实例化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-nodelist</title>
</head>
<body>
    <!-- 1. Define some markup -->
    <button data-clipboard-text='静态文本1'>Copy</button>
    <button data-clipboard-text='静态文本2'>Copy</button>
    <button data-clipboard-text='静态文本3'>Copy</button>
    <!-- 2. Include library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
    <script>
        //使用标签选择器获取列表
        var btns = document.querySelectorAll('button');
        var clipboard = new ClipboardJS(btns);
        clipboard.on('success', function (e) {
            alert("复制成功");
        });
        clipboard.on('error', function (e) {
            alert("复制失败");
        });
    </script>
</body>
</html>

复制静态文本

上面的例子都是复制按钮自己属性中的静态文本中。但是如果想要点击按钮，复制文本框中的内容则不能这么写：

复制其他元素的内容

复制一个内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-selector</title>
</head>
<body>
    <!-- 1.定义输入框 -->
    <input type="text"  id="input">
    <!-- 2. 使用data-clipboard-target属性指定从文本框中复制 -->
    <button class="btn" data-clipboard-target="#input">Copy</button>
    <!-- 3. 导入clipboard.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!-- 4. js中使用class选择器进行实例化 -->
    <script>
        //使用类选择器实例化,不可忽略
        var clipboard = new ClipboardJS('.btn');
        //监听事件给出提示,可忽略
        clipboard.on('success', function (e) {
            alert("复制成功");
        });
        clipboard.on('error', function (e) {
            alert("复制失败");
        });
    </script>
</body>
</html>

效果：

这里的按钮称为触发元素，被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素(文本框)的选择器，**而data-clipboard-target的属性被设置在触发元素(按钮)**上
可以发现，复制完毕后文本框中的文本处于选中状态，可以使用 e.clearSelection();方法取消选中状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    //使用类选择器实例化,不可忽略
    var clipboard = new ClipboardJS('.btn');
    //监听事件给出提示,可忽略
    clipboard.on('success', function (e) {
        //取消选中状态
        e.clearSelection();
        alert("复制成功");
    });
    clipboard.on('error', function (e) {
        //取消选中状态
        e.clearSelection();
        alert("复制失败");
    });
</script>

这种方式，文本框中输入什么，就复制什么。复制的内容可以是动态的，目标元素的值发生变化，复制的值也发生变化。适用于，复制内容不固定的情况。

复制多个内容的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-selector</title>
</head>
<body>
    <!-- 1.定义输入框 -->
    <textarea rows="1" cols="50" id="input-1" readonly>
文本框1
</textarea>
    <!-- 2. 使用data-clipboard-target属性指定从文本框中复制 -->
    <button class="btn" data-clipboard-target="#input-1">input-1</button>
    <br>
    <textarea rows="1" cols="50" id="input-2" readonly>
文本框2
</textarea>
    <button class="btn" data-clipboard-target="#input-2">input-2</button>
    <br>
    <textarea rows="1" cols="50" id="input-3" readonly>
文本框3
</textarea>
    <button class="btn" data-clipboard-target="#input-3">input-3</button>
    <br>
    <!-- 3. 导入clipboard.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!-- 4. js中使用class选择器进行实例化 -->
    <script>
        //使用类选择器实例化,不可忽略
        var clipboard = new ClipboardJS('.btn');
        //监听事件给出提示,可忽略
        clipboard.on('success', function (e) {
            alert("复制成功");
        });
        clipboard.on('error', function (e) {
            alert("复制失败");
        });
    </script>
</body>
</html>

剪切方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-selector</title>
</head>
<body>
    <!-- 1.定义输入框 -->
    <input type="text"  id="input">
    <!-- 2. 使用data-clipboard-target属性指定从文本框中复制 -->
    <button class="btn" data-clipboard-target="#input">Copy</button>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#input">cut</button>
    <!-- 3. 导入clipboard.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!-- 4. js中使用class选择器进行实例化 -->
    <script>
        //使用类选择器实例化,不可忽略
        var clipboard = new ClipboardJS('.btn');
        //监听事件给出提示,可忽略
        clipboard.on('success', function (e) {
            //取消选中状态
            e.clearSelection();
            alert("复制成功");
        });
        clipboard.on('error', function (e) {
            //取消选中状态
            e.clearSelection();
            alert("复制失败");
        });
    </script>
</body>
</html>

参考链接

官网文档：https://clipboardjs.com/
使用HTML DOM选择器实例化：https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18
使用使用HTML元素实例化：https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17
使用html元素列表实例化：https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19
https://www.jb51.net/article/125914.htm
https://www.cnblogs.com/yunser/p/7628031.html