3秒后查看文本和警告框

时间:2015-08-06 22:30:01

标签: javascript html css

我需要看到文本“示例”并在3秒后同时提醒成功。现在只有文字工作,但警报框始终站立。我需要在此代码中更改哪些内容?

HTML

<div class="alert alert-success">  
<button class="close" data-dismiss="alert">×</button> 

<p id="free" class="hid">

Example

</p>  

</div> 

CSS

p.hid {
  display: none;
}

的JavaScript

setTimeout(function() {
  var el = document.getElementById('free');

  removeClass(el, 'hid');
}, 3000);

function removeClass(el, className) {
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(new RegExp('(^|\\b)' +
        className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
} 

CodePen

1 个答案:

答案 0 :(得分:2)

这是一支工作笔:http://codepen.io/anon/pen/GJzzGz

我将p.hid更改为.hid,将ID #alert添加到div .alert,然后将var el = document.getElementById('free');更改为var el = document.getElementById('alert');

现在代码看起来像这样:

<强> HTML

<div id="alert" class="alert alert-success hid">  
  <button class="close" data-dismiss="alert">×</button> 
  <p id="free">Example</p>
</div>  

<强> CSS

.hid {
  display: none;
}

<强>的javascript

setTimeout(function() {
  var el = document.getElementById('alert');

  removeClass(el, 'hid');
}, 3000);

    function removeClass(el, className) {
      if (el.classList) {
        el.classList.remove(className);
      } else {
        el.className = el.className.replace(new RegExp('(^|\\b)' +
            className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }