<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; } #tip { width: 150px; height: 30px; background-color: lightgray; opacity: 0.5; margin:200px auto; padding-top: 5px; text-align: center; color: red; display: none; } </style> <script> onload = function () { // 当页面的所有元素创建完成, 等待外部文件下载完毕才会执行 var btn = document.getElementById('btn'); btn.onclick = function () { // 删除操作 // 显示删除成功的tip var tip = document.getElementById('tip'); tip.style.display = 'block'; // 隔3秒钟之后让tip隐藏 setTimeout(function () { tip.style.display = 'none'; }, 3000); } } </script> </head> <body> <input type="button" id="btn" value="删除"> <div id="tip">删除成功</div> <script> // 当页面的所有元素创建完成之后执行，不需要等待外部文件下载完毕 </script> </body> </html>