Question

我希望我的按钮能够将textarea文本剪切到剪贴板中每次单击按钮时，按钮都会同时旋转。我明白了工作，但它只旋转一次，下次我点击它，它会切割文字但按钮不会旋转。

HTML 我的按钮和textarea

<div class="box-2-wrap">

<textarea class="out-put"></textarea>

<button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button>

</div>

CSS 我的样式表

.box-2-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0px solid #333;
}
.box-2-wrap textarea {
    flex:1;
    padding: 4%;
    overflow-y: auto;
    background-color: #333;
    color: gold;
    max-width: 100%;
    min-width: 100%;
    font-size: 110%;
    border: none;
    border-radius: 8px;
}
.box-2-wrap button {
    align-items: flex-end;
    justify-content: center;
    padding: 10px 2%;
    width: 50%;
    margin: 6% auto;
    background-color: #178E44;
    color: white;
    font-size: 120%;
    border: none;
    border-radius: 4px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

JS 我的JavaScript

function unSelectAll(){
        var output = document.getElementsByClassName("out-put")[0];
            output.innerHTML = "";
    }
}

function copyEmails(){
    var output = document.getElementsByClassName("out-put")[0];
        output.select();
        document.execCommand('copy');
        unSelectAll();
    var copyEmailsButton = document.getElementById("copyEmailsButton");

    if (copyEmailsButton.style.animation !== "rotate 1s") {
        copyEmailsButton.style.animation = "rotate 1s";
    }else{
        copyEmailsButton.style.animation = "none";
    }
}

Answer 1

在您指定的copyEmails中的if-else块中，如果动画样式未设置为“旋转1秒”，则按钮将旋转一秒钟。但如果是，它只会将动画风格设置为无。

如果您第三次点击该按钮，您将会发现它将再次旋转。这是因为第二次单击时，您再次将动画样式设置为无。

这意味着，按钮会在每次第二次点击时切换和旋转！

要在每次单击时按钮旋转，请将if-else块更改为：

copyEmailsButton.style.animation = "rotate 1s";
setTimeout(function() {
copyEmailsButton.style.animation = "none" 
}, 1000);

每次单击按钮后，动画完成后，动画样式再次设置为无。

Answer 2

1您的unselctAll功能出现错误，应删除一个额外的关闭}

2在下次点击之前重置按钮样式，如下面的示例

function unSelectAll(){
        var output = document.getElementsByClassName("out-put")[0];
            output.innerHTML = "";
    
}

function copyEmails(){
    var output = document.getElementsByClassName("out-put")[0];
        output.select();
        document.execCommand('copy');
        unSelectAll();
    var copyEmailsButton = document.getElementById("copyEmailsButton");

    if (copyEmailsButton.style.animation !== "rotate 1s") {
        copyEmailsButton.style.animation = "rotate 1s";
    }else{
        copyEmailsButton.style.animation = "none";
    }
}

.box-2-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0px solid #333;
}
.box-2-wrap textarea {
    flex:1;
    padding: 4%;
    overflow-y: auto;
    background-color: #333;
    color: gold;
    max-width: 100%;
    min-width: 100%;
    font-size: 110%;
    border: none;
    border-radius: 8px;
}
.box-2-wrap button {
    align-items: flex-end;
    justify-content: center;
    padding: 10px 2%;
    width: 50%;
    margin: 6% auto;
    background-color: #178E44;
    color: white;
    font-size: 120%;
    border: none;
    border-radius: 4px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

<textarea class="out-put" onmouseover="copyEmailsButton.style.animation = 'none';" placeholder="always click here before clicking the button"></textarea>

<button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button>

</div>

我的函数只运行一次

2 个答案: