我是編碼新手，很抱歉，我正在嘗試做這件事，單擊按鈕時會顯示一個隨機有趣的事實，但我還想添加一個功能，如果懸停足夠長的時間，按鈕文本會更改為3 次（在 3 秒、5 秒和 8 秒），然后停留在最后一次懸停（8 秒一次）直到單擊，然后回傳到第一個非懸停按鈕文本。這是我正在使用的。另外，如果有人知道禁用抗鋸齒的方法，那也很棒
編輯：顯然我不擅長解釋。我正在尋找更改按鈕文本，而不是有趣的事實。有趣的事實只會在點擊時出現，我希望按鈕文本（“點擊我的有趣事實”）在懸停足夠長的時間后變為 3 個其他文本，例如，文本 a 會在 3 秒后變為文本 b , 然后文本 b 會在懸停開始后 5 秒后變為文本 c，然后在持續懸停 8 秒后變為文本 d（所以它只會在總共 8 秒懸停后發生，在 3s、5s 和8 秒）。之后它應該保持為文本 d 直到被點擊。一旦它被點擊，它應該回傳到文本 a（“點擊我看一個有趣的事實”）并顯示一個隨機的有趣事實
<!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>uj5u.com熱心網友回復：
要計算秒數，setInterval() 可以幫助您，您可以每 x 秒執行一次操作。
在這種情況下，我們要檢查用戶是否懸停了 3,5 和 8 秒，所以我們改變timer每一秒，當它達到我們想要的，我們呼叫，然后當我們超過 8秒時newQuotes()停止記錄時間，或者如果用戶timer不再懸停按鈕。
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>uj5u.com熱心網友回復：
您可以嘗試以下實作并進行一些解釋
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/493375.html
下一篇：未初始化值和未定義值之間的差異