单击按钮时颤动如何复制文本-无论(1)

📌 相关文章

📜 单击按钮时颤动如何复制文本-无论(1)

📅 最后修改于: 2023-12-03 15:07:20.767000 🧑 作者: Mango

如何在单击按钮时实现文本颤动效果并复制文本？

本篇文章将介绍如何使用JavaScript和CSS来实现在单击按钮时文本颤动效果并复制文本的操作。具体实现步骤如下：

功能实现步骤

创建一个按钮元素，并绑定一个单击事件。
获取要复制的文本内容，并将其保存到剪贴板。
使用CSS定义一个动画效果让文本颤动。
将动画效果添加到文本元素中。

代码实现

HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>单击按钮时实现文本颤动效果并复制文本</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="wrapper">
		<p id="text">Hello, world!</p>
		<button id="copy_btn">复制文本</button>
	</div>

	<script src="script.js"></script>
</body>
</html>

JavaScript代码

// 获取要复制的文本内容
const text = document.getElementById('text').innerText;
// 获取复制按钮
const copyBtn = document.getElementById('copy_btn');

// 添加单击事件，执行复制文本操作
copyBtn.addEventListener('click', () => {
	// 创建一个临时的textarea元素，并设置要复制的文本内容
	const tempTextarea = document.createElement('textarea');
	tempTextarea.value = text;
	// 添加到页面中
	document.body.appendChild(tempTextarea);
	// 选中文本
	tempTextarea.select();
	// 复制文本到剪贴板
	document.execCommand('Copy');
	// 删除textarea元素
	document.body.removeChild(tempTextarea);

	// 将文本颤动效果添加到文本元素中
	document.getElementById('text').classList.add('shaking');
	// 延迟0.5秒后移除颤动效果
	setTimeout(() => {
		document.getElementById('text').classList.remove('shaking');
	}, 500);
});

CSS代码

.shaking {
	animation: shaking 0.5s;
	animation-iteration-count: 1;
}

@keyframes shaking {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0);
	}
}

运行效果

点击复制文本按钮时，文本会有颤动效果，并将文本内容复制到剪贴板中。

总结

本文介绍了如何在单击按钮时实现文本颤动效果并复制文本的操作，通过JavaScript获取要复制的文本内容，并将其复制到剪贴板中，然后使用CSS定义的动画效果实现文本颤动效果。该功能可以应用于各种Web应用程序中，方便用户快速复制需要的文本。