问题描述
您好，我是新的 Web 开发人员，正在开发报价网站。
要清楚地理解这个问题，只需访问下面我的 CodePen 项目，然后单击项目中的任何复制按钮。 https://codepen.io/Akash11166666/pen/JjRzqzp
看到我的 CodePen。正如您所看到的，我创建了一个自定义复制警报，它会提醒您文本已被复制，但它不会在几秒钟后消失。
我的 CodePen 项目供参考
我的 Javascript
<script>
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');
let results = [];
const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());
const pageResponse = (records,pageSize,page) =>
(start => records.slice(start,Math.min(records.length,start + pageSize)))
(pageSize * (page - 1));
const main = async() => {
btnFirst.addEventListener('click',navFirst);
btnPrev.addEventListener('click',navPrev);
btnNext.addEventListener('click',navNext);
btnLast.addEventListener('click',navLast);
pageSize.addEventListener('change',changeCount);
results = await retrieveAllQuotes();
updatePager(results);
redraw();
};
const redraw = () => {
resultEl.innerHTML = '';
const paged = pageResponse(results,getPageSize(),getCurrPage());
const contents = document.createElement('div');
contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">copy</button><span class="status-copy-alert hidden">copied</span></div></div>`).join('');
resultEl.append(contents);
};
const navFirst = (e) => {
pageNoCurr.textContent = 1;
pageCurr.value = 1;
redraw();
}
const navPrev = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const prevPage = curr > 1 ? curr - 1 : curr;
pageCurr.value = prevPage;
pageNoCurr.textContent = prevPage;
redraw();
}
const navNext = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const nextPage = curr < pages ? curr + 1 : curr;
pageCurr.value = nextPage;
pageNoCurr.textContent = nextPage;
redraw();
}
const navLast = (e) => {
pageNoCurr.textContent = getPageCount();
pageCurr.value = getPageCount();
redraw();
}
const changeCount = () => {
updatePager();
redraw();
};
const updatePager = () => {
const count = getPageCount();
const curr = getCurrPage();
pageCurr.value = curr > count ? 1 : curr;
pageNoCurr.textContent = curr > count ? 1 : curr;
pageNoCount.textContent = count;
resultCount.textContent = getResultCount();
};
const retrieveAllQuotes = async function() {
// write your asynchronous fetching here
return[{
quotes: "1The cat is better than dog."
},{
quotes: "2Google is a open source library."
},{
quotes: "3Cats are better than ferrets."
},{
quotes: "4love books."
},{
quotes: "5Life is short make it possible."
},{
quotes: "6The cat is better than dog"
},{
quotes: "7Google is a open source library."
},{
quotes: "8Cats are better than ferrets."
},{
quotes: "9love books."
},{
quotes: "10Life is short make it possible."
},];
}
document.querySelector('.allquotes').addEventListener(
'click',function (e) {
e.preventDefault();
if (e.target && e.target.matches('.copystatus')) {
const quote = e.target.parentNode.closest('.latestatus')
.childNodes[0].textContent;
const notify = e.target.nextSibling.closest('.status-copy-alert');
notify.classList.toggle('hidden');
const textArea = document.createElement('textarea');
textArea.value = quote;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
textArea.remove();
}
},false
);
main();
</script>
我的 Css
<style>
/* Main Status */
.hidden {
display:none;
}
.mainStatus{
background-color: #fff;
border-radius: 10px;
Box-shadow: 0 3px 10px rgba(0,0.2);
padding-bottom: 5px;
margin: 10px;
margin-top: 10px;
max-width: 95%;
width: 95%;
height: auto;
border-radius: 20px;
Box-shadow: 0 3px 10px rgba(0,0.2);
}
.statusheading{
text-align: center;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px 10px 10px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
font-weight: 300;
font-size: 20px;
}
.latestatus{
display: grid;
height: auto;
Box-shadow: 0 3px 10px rgba(0,0.2);
padding: 10px 20px 10px 20px;
border-radius: 30px;
margin: 10px 10px 10px 10px;
width: 445px;
min-height: 130px;
font-size: 15px;
}
.allStatus{
display: flex;
}
.latestatus p{
width: auto;
position: relative;
}
.copystatus{
font-weight: 500;
text-transform: uppercase;
width: 100px;
height: 40px;
}
.pagable {
display: flex;
flex-direction: column;
border: var(--pageable-border);
background: var(--pageable-background);
}
.pagable .pagable-results {
display: flex;
flex-direction: column;
flex: 1;
padding: 0.25em;
}
.pagable .pagable-status {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.25em;
background: var(--pageable-status-background);
}
.pagable .pagable-actions {
display: grid;
grid-auto-flow: column;
grid-gap: 0.25em;
}
.pagable .pagable-actions input[name="page-curr"] {
width: 3em;
}
.btn {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
background: #18b495;
color: #fff;
border: none;
border-radius: 30px;
}
.btn:hover {
transform: scale(0.98);
}
.status-copy-alert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
visibility: visible;
}
.status-copy-alert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
</style>
我的 HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="hindinj.html">caeman</a>
<div class="mainStatus">
<h2 class="statusheading">Latest English Status</h2>
<div class="allquotes"></div>
<div class="pagable-status">
<label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
<div class="pagable-actions">
<button class="page-btn-first">≪</button>
<button class="page-btn-prev"><</button>
<input type="number" name="page-curr" min="1" value="1" />
<button class="page-btn-next">></button>
<button class="page-btn-last">≫</button>
<select name="page-size">
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>
<label>(<span class="result-count"></span> items)</label>
</div>
</body>
</html>
复制提醒，提醒您文本已复制，但几秒钟后不会消失。
非常感谢回答这个问题的人。
解决方法
您通过删除（或实际切换）其 as.character(lubridate::dmy(day)) 类来显示工具提示（或称为“警报”）。您可以通过添加 # devtools::install_github("alistaire47/read.so")
library(tidyverse)
library(lubridate)
#>
#> Attaching package: 'lubridate'
#> The following objects are masked from 'package:base':
#>
#> date,intersect,setdiff,union
dataset_lago <- read.so::read_md("| Depth | P_Total | day |
| -------- | -------------- | -------------- |
| 0 | 401.27 | 26_05_11 |
| 2 | 206.24 | 26_05_11 |
| 4.8 | 163.79 | 26_05_11 |
| 0 | 255.92 | 12_01_12 |
| 2 | 167.72 | 12_01_12|
| 5 | 300.29 | 12_01_12 | ")
dataset_lago %>%
mutate(day = dmy(day)) %>%
ggplot(mapping= aes(x = P_Total,y= Depth))+
geom_path(aes(P_Total,colour= as.character(day)))+
scale_y_reverse()+
theme(plot.title = element_text(hjust = 0.5))+
labs(x = "P_Total",y = "Depth") +
theme_minimal()
类再次隐藏它。您可以在一段时间后执行此操作，例如3 秒，使用 setTimeout()。
hidden您可以添加一个 onclick 函数来复制按钮以触发跨度超时。只需将此添加到您的 javascript 文件的末尾：
function hideSpan() {
setTimeout(function(){ $(".status-copy-alert").addClass("hidden");
//document.getElementById("status-copy-alert").classList.add("hidden"); use this code for javascript only
},3000);
//you can change 3000 milliseconds to anything that you wish
}
并将您的按钮配置为：
<button class="copystatus btn" onclick="hideSpan();">Copy</button
<span class="status-copy-alert hidden" id="status-copy-alert">
如果您只使用 Javascript，请不要忘记在您的警报范围中添加一个 id。
基本上就像，当用户点击 copystatus 按钮时，它会触发 hideSpan() 函数。您可以从此 link
了解有关 setTimout 的更多信息