嘿,我是一个新的开发人员,我试图建立一个网站。网站的主要目标是向访问者提供一段文字。我的一些助手给了我一个javascript来复制元素中的文本,它会给出一个自定义警报,说明文本已被复制。但是我需要一个动画/过渡,当我点击复制按钮时,自定义复制警报应该从左到右。我的Javascript
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
我的Html
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
</div>
</div>
自定义警报是JavaScript创建的/code>。比预先
你想做这种事吗?