当前位置:首页 > JavaScript

js 实现alert

2026-02-02 00:42:39JavaScript

使用 alert() 方法

在 JavaScript 中,alert() 是浏览器提供的全局方法,用于显示一个带有指定消息和“确定”按钮的警告框。

alert("这是一个警告消息");

自定义样式或替代方案

原生 alert() 的样式无法直接修改。若需自定义样式或交互,可以使用以下替代方案:

1. 使用 console.log() 输出到控制台

console.log("调试信息");

2. 使用 DOM 创建自定义弹窗
通过 HTML 和 CSS 实现可定制的弹窗:

<div id="customAlert" style="display:none; position:fixed; top:20%; left:30%; background:#fff; padding:20px; border:1px solid #000;">
  <p id="alertMessage"></p>
  <button onclick="document.getElementById('customAlert').style.display='none'">确定</button>
</div>

<script>
function showCustomAlert(message) {
  document.getElementById("alertMessage").innerText = message;
  document.getElementById("customAlert").style.display = "block";
}
showCustomAlert("自定义弹窗消息");
</script>

3. 使用第三方库(如 SweetAlert)
引入 SweetAlert2 库实现美观弹窗:

js 实现alert

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
Swal.fire("标题", "这里是消息内容", "info");
</script>

注意事项

  • alert() 会阻塞浏览器线程,直到用户点击“确定”。
  • 在 Node.js 环境中无法使用 alert(),需通过 console.log() 或其他模块实现类似功能。

标签: jsalert
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…