JavaScript 实现点击按钮动态显示 Div 盒子

使用 JavaScript 点击按钮动态显示 Div 盒子

本文将向您展示如何使用 JavaScript 代码实现点击按钮后，以动态特效的方式将 Div 盒子显示出来。

HTML 代码

<button id='showDivBtn'>显示盒子</button>
<div id='myDiv'></div>

CSS 代码

#myDiv {
  display: none;
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  position: relative;
  animation-duration: 1s;
  animation-name: slideIn;
}

@keyframes slideIn {
  0% {
    top: -200px;
  }
  100% {
    top: 0;
  }
}

JavaScript 代码

var showDivBtn = document.getElementById('showDivBtn');
var myDiv = document.getElementById('myDiv');

showDivBtn.onclick = function() {
  myDiv.style.display = 'block';
  myDiv.classList.add('slide-in');
}

代码解释

1. 获取 DOM 元素： 使用 document.getElementById() 方法获取按钮和盒子的 DOM 元素。
2. 添加点击事件： 使用 onclick 事件监听按钮的点击事件。
3. 显示盒子： 当点击按钮时，将盒子的 display 属性设置为 'block'，使其可见。
4. 添加动画类： 添加 'slide-in' 类名到盒子，该类名对应 slideIn 动画，实现从上方滑入的效果。

通过以上代码，您便可以实现点击按钮动态显示 Div 盒子的功能，并使用 CSS 动画为其添加特效，提升用户体验。

提示： 您可以根据需要修改 CSS 动画的属性，例如动画时间、动画类型等，来实现不同的特效。