onclick 显示 div，几秒钟后隐藏我显示的 div
[英]onclick show div and after some seconds hide my shown div
问题描述
I need some help with my button.
我的按钮需要一些帮助。 i want when i click on the button (click me) the hidden div should be display but after some seconds my hidden div hide automatically.我想要当我点击按钮（点击我）隐藏的 div 应该显示但几秒钟后我的隐藏的 div 自动隐藏。 Thanks !!谢谢 ！！
Here the code is :这里的代码是：
<!DOCTYPE html>
<html>
<head>
<style>
.show {
-o-transition: opacity 3s;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
transition: opacity 3s;
opacity:1;
}
.hide{ opacity:0; }
</style>
<script>
function ShowSecond()
{
var div2 = document.getElementById("div2");
div2.className="show";
}
</script>
</head>
<body>
<div id="div1" class="show">
First Div
<button onclick="ShowSecond()">clickMe</button>
</div>
<div id="div2" class="hide">
Hidden Div
</div>
</body>
</html>
6 个解决方案
解决方案1
2 2014-03-03 09:37:45
You can use the setTimeout function for this:您可以为此使用setTimeout函数：
setTimeout(function() { // your code here }, 1000);
This will execute the function after 1 second.这将在 1 秒后执行该功能。
If you want to use jQuery, you can use the .delay() function for this: $(element).show().delay(1000).hide();如果你想使用 jQuery，你可以使用.delay()函数： $(element).show().delay(1000).hide();
More info: https://api.jquery.com/delay/更多信息： https : //api.jquery.com/delay/
解决方案2
1 2014-03-03 09:44:02
In your ShowSecond function do the following在您的ShowSecond函数中执行以下操作
function ShowSecond()
{
var div2 = document.getElementById("div2");
div2.className="show";
setTimeout(function() {
div2.className="hide";
}, 3000);
}
By above code your div will hide after 3s .通过上面的代码，您的div将在3s后隐藏。 time is your choice increase or decrease as your requirement时间是您的选择 根据您的要求增加或减少
解决方案3
0 2014-03-03 09:39:56
You want the setTimeout() function你想要 setTimeout() 函数
setTimeout(function() {
// Do something after 5 seconds
}, 5000);
解决方案4
0 2014-03-03 09:42:26
Simply usesetTimeout to perform time-delay operations.只需使用setTimeout来执行延时操作。
function ShowSecond() {
var div2 = document.getElementById("div2");
div2.className = "show";
var timeOut = setTimeout(function () {
div2.className = "hide";
}, 2000);
}
reason why I used setTimeout(..) to a variable timeOut : In future you may need to cancel this timeout operation, which can be done as clearTimeout(timeOut)我将setTimeout(..)用于变量timeOut ：将来您可能需要取消此超时操作，可以通过clearTimeout(timeOut) 完成
解决方案5
0 2014-03-03 11:28:21
You can also use CSS3 animation instead of transition : running demo您还可以使用 CSS3 animation代替transition ：运行演示
HTML HTML
<button onclick="animate()">clickMe</button>
<div id="hiddenDiv1" class="hideOnStart">
Hidden Div
</div>
JS JS
function animate() {
var s = document.getElementById("hiddenDiv1").style;
s.animationName = 'showAndHide';
s.animationDuration = '3s';
}
CSS CSS
@keyframes showAndHide {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.hideOnStart{
opacity: 0;
}
Obviously it needs to be prefixed to be cross browser, and the plain JavaScript is just to stick to your code, using jQuery will take care of this things automatically.显然它需要前缀才能跨浏览器，而纯 JavaScript 只是为了坚持你的代码，使用 jQuery 会自动处理这些事情。
解决方案6
0 2019-12-11 11:55:13
If you are using bootstrap css and want plain javascript to invoke this event then you can use function below:如果您正在使用 bootstrap css 并希望普通的 javascript 调用此事件，那么您可以使用以下函数：
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'YOUR_CLASS_NAME') {
var div2 = document.getElementById("ID_FOR_DIV");
div2.className = "d-block";
setTimeout(function() {
div2.className="d-none";
}, 6000);
}
}, false);
Or if you are not using bootstrap then you can use或者，如果您不使用引导程序，则可以使用
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'YOUR_CLASS_NAME') {
var div2 = document.getElementById("ID_FOR_DIV");
div2.style.display= 'block';
setTimeout(function() {
div2.style.display = 'none';
}, 6000);
}
}, false);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.