当前位置:首页 > JavaScript

js 实现alert

2026-02-02 00:42:39JavaScript

使用 alert() 方法

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

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

自定义样式或替代方案

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

js 实现alert

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

js 实现alert

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 库实现美观弹窗:

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

注意事项

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

标签: jsalert
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现变形

js实现变形

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

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…