HTML点击文本复制并显示已复制

<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div><span id="btn" data-clipboard-text="baidu">复制</span></div>
<div id="show" style="display: none;">已复制</div>
<script>
	var btn=document.getElementById('btn');
	var clipboard=new Clipboard(btn);
	clipboard.on('success', function(e){
		$('#show').slideDown().delay(1500).slideUp(300);
		console.log(e);
	});
	clipboard.on('error', function(e){
		$('#show').slideDown().delay(1500).slideUp(300);
		console.log(e);
	});
</script>

重要部分就是data-clipboard-text, 表示要复制的内容

slideDown(), slideUp()是动态下滑, 动态上滑的意思, 想学更多就去学下js的动画

其中12到15行可删掉, 因为几乎不会error的