我想要一個按鈕中有兩個功能
[英]I want Two functions in one button
問題描述
你好，我是新手。 我想在網頁中添加一個按鈕； 通過單擊它，將啟動一個十秒鍾的計時器，當它停止時，消息將顯示為“再次單擊”。 但是圖片沒有改變，但是計時器工作正常; 我該怎么辦 ？
我希望每次點擊都隨機更改圖片，並且在每次點擊計時器上也都運行。
我的HTML是這樣的：
var ads1 = [ '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ', '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ', '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > ' ] function ads1Name() { var randomNumber = Math.floor(Math.random() * (ads1.length)); document.getElementById('ads1Display').innerHTML = ads1[randomNumber]; } var ads2 = [ '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ', '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ', '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > ' ] function ads2Name() { var randomNumber = Math.floor(Math.random() * (ads2.length)); document.getElementById('ads2Display').innerHTML = ads2[randomNumber]; } var ads3 = [ '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ', '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ', '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > ' ] function ads3Name() { var randomNumber = Math.floor(Math.random() * (ads3.length)); document.getElementById('ads3Display').innerHTML = ads3[randomNumber]; }
<body onLoad="ads1Name(); ads2Name(); ads3Name();"> <p id="timer">Click Now</p> <button id="up" onclick="timedText(); up('100')">Click Here !!</button> <div> <input id="myNumber" value="0" /> <table> <tr> <td id="ads1Display"></td> <td id="ads1Display"></td> <td id="ads1Display"></td> </tr> </table> </div> <script> function timedText() { setTimeout(myTimeout1, 900) setTimeout(myTimeout2, 1800) setTimeout(myTimeout3, 2700) setTimeout(myTimeout4, 3600) setTimeout(myTimeout5, 4500) setTimeout(myTimeout6, 5400) setTimeout(myTimeout7, 6300) setTimeout(myTimeout8, 7200) setTimeout(myTimeout9, 8100) } function myTimeout1() { document.getElementById("timer").innerHTML = "8 second"; } function myTimeout2() { document.getElementById("timer").innerHTML = "7 seconds"; } function myTimeout3() { document.getElementById("timer").innerHTML = "6 seconds"; } function myTimeout4() { document.getElementById("timer").innerHTML = "5 seconds"; } function myTimeout5() { document.getElementById("timer").innerHTML = "4 seconds"; } function myTimeout6() { document.getElementById("timer").innerHTML = "3 seconds"; } function myTimeout7() { document.getElementById("timer").innerHTML = "2 seconds"; } function myTimeout8() { document.getElementById("timer").innerHTML = "1 seconds"; } function myTimeout9() { document.getElementById("timer").innerHTML = "Click again"; } </script> <script> function up(max) { document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1; if (document.getElementById("myNumber").value >= parseInt(max)) { document.getElementById("myNumber").value = max; } } </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src="demp.js"></script> </body>
1 個解決方案
解決方案1
1 2019-02-26 17:00:01
可以使用setInterval而不是使用setTimeout ，將其放入變量中，並在計時器為0或用戶再次單擊時將其清除：
var interval;
function timedText() {
var i = 9;
clearInterval(interval);
interval = setInterval(() => {
i--;
if (i === 0) {
clearInterval(interval);
document.getElementById("timer").innerHTML = "Click again";
} else {
document.getElementById("timer").innerHTML = i + " second";
}
}, 1000);
}
var interval; function timedText() { var i = 9; clearInterval(interval); interval = setInterval(() => { i--; if (i === 0) { clearInterval(interval); document.getElementById("timer").innerHTML = "Click again"; } else { document.getElementById("timer").innerHTML = i + " second"; } }, 1000); } function up(max) { document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1; if (document.getElementById("myNumber").value >= parseInt(max)) { document.getElementById("myNumber").value = max; } } var ads1 = [ '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ', '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ', '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > ' ] function ads1Name() { var randomNumber = Math.floor(Math.random() * (ads1.length)); document.getElementById('ads1Display').innerHTML = ads1[randomNumber]; } var ads2 = [ '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ', '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ', '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > ' ] function ads2Name() { var randomNumber = Math.floor(Math.random() * (ads2.length)); document.getElementById('ads2Display').innerHTML = ads2[randomNumber]; } var ads3 = [ '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ', '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ', '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > ' ] function ads3Name() { var randomNumber = Math.floor(Math.random() * (ads3.length)); document.getElementById('ads3Display').innerHTML = ads3[randomNumber]; }
<p id="timer">Click Now</p> <button id="up" onclick="timedText(); up('100')">Click Here !!</button> <div> <input id="myNumber" value="0" /> <table> <tr> <td id="ads1Display"></td> <td id="ads1Display"></td> <td id="ads1Display"></td> </tr> </table> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src="demp.js"></script>
兩個功能； 檢查輸入文件和文本區域，我也想禁用提交按鈕，如何將功能合二為一？
[英]Two functions; checking the input file and the text area and I also want to disable the submit button how do I make the functions into one?
我想一鍵調用兩個函數，並確保它們一個接一個地工作
[英]i want to call two functions on one click and make sure they will work one after another
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.