我是新来的编码所以抱歉，我试图做这件事，一个按钮显示一个随机有趣的事实时，点击，但我也想添加一个功能，如果悬停足够长的时间，按钮文本变化多达3次(在3s, 5s和8s)，然后停留在最后一个悬停(8s一个)，直到点击，它回到第一个非悬停按钮文本。这是我研究的东西。此外，如果有人知道一种方法来禁用抗锯齿，那将是惊人的，以及
显然我不擅长解释。我希望改变按钮文本，而不是有趣的事实。有趣的事实只会出现在点击时,我想让按钮的文本("点击我做有趣的fact")改变成3其他文本在徘徊的时间足够长,例如,文本将改变成文本b后3秒,然后文本b将改变到文本c 5秒之后开始徘徊后,然后进入文本不断盘旋的d后8秒(这只会发生在总共8秒,徘徊在3 s变化,5和8年代)。之后，它应该保持为文本d，直到单击。一旦它被点击，它应该返回文本a ("click me for a fun fact")并显示一个随机的有趣的事实<!DOCTYPE html>
<html>
<head>
<style>
button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}
</style>
</head>
<body>
<script>
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
]
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
</script>
<button onclick="newQuote()">click me for a fun fact</button>
<div id="quoteDisplay">
</div>
</body>
</html>要计算秒数，setInterval()可以帮助您，您可以每x秒(s)做一些事情。
在这种情况下，我们想要检查用户是否悬停了3,5和8秒，所以我们每秒钟改变timer，当它达到我们想要的，我们调用newQuotes()，然后停止记录时间当我们的timer超过8秒，或者如果用户不再悬停按钮。
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
]
var myButtonText = [
'a button text',
'another button text',
'one more button text'
]
var timer=0, timerIdle=false, interval, text=0;
function newQuote() {
document.getElementById("myButton").innerText = "click me for a fun fact";
text = 0;
timer = 0;
if(quotes.length > 0) {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
//Remove item to avoid repetition
const index = quotes.indexOf(quotes[randomNumber]);
if(index > -1){
quotes.splice(index, 1);
}
}
}
function hoverMe() {
if(!timerIdle){
// Do something every 1 second
interval = setInterval(function(){
if(timer>8){
//if timer goes over 8sec, stop doing something on hover
timerIdle = true;
} else {
timer++;
// if timer == 3,5 or 8 call newQuote();
if([3,5,8].indexOf(timer) > -1 ) {
console.log(timer)
document.getElementById("myButton").innerText = myButtonText[text];
text++;
}
}
}, 1000);
}
}
// stop the interval if user is not hovering the button
function mouseLeave() {
clearInterval(interval)
}button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}<!DOCTYPE html>
<html>
<body>
<button id="myButton" onclick="newQuote()" onmouseover="hoverMe()" onmouseleave="mouseLeave()">click me for a fun fact</button>
<div id="quoteDisplay"></div>
</body>
</html>您可以尝试下面的实现，并给出一些解释
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
];
var selectedQuote = ""
//shuffle to make it non-duplicated records
function shuffle(array) {
var i = array.length,
j = 0,
temp;
while (i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function newQuote() {
if (!selectedQuote) {
var randomNumber = Math.floor(Math.random() * (quotes.length));
selectedQuote = quotes[randomNumber]
}
document.getElementById('quoteDisplay').innerHTML = selectedQuote;
}
var timer = [3000, 5000, 8000]; //3s, 5s, 8s
var interval;
//generate quotes when a user hovers over the element
function mouseOver() {
var currentTimerIndex = 0;
var passedTime = 0;
var timeStack = 1000;
var shuffledQuotes = shuffle(quotes); //randomize quotes
interval = setInterval(function() {
passedTime += timeStack;
if (currentTimerIndex > timer.length - 1) {
clearInterval(interval);
interval = null;
return;
}
if (timer[currentTimerIndex] <= passedTime) {
document.getElementById('quoteButton').innerHTML = shuffledQuotes[currentTimerIndex];
selectedQuote = shuffledQuotes[currentTimerIndex];
currentTimerIndex++;
}
}, timeStack)
}
//stop quote generations
function mouseOut() {
if (interval) {
clearInterval(interval);
interval = null;
}
}button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}<button onclick="newQuote()" onmouseover="mouseOver()" onmouseout="mouseOut()" id="quoteButton">click me for a fun fact</button>
<div id="quoteDisplay">
</div>