如何在 JavaScript 中创建可自定义的警报？
在当今快节奏的世界中，掌握最新知识至关重要。使用 JavaScript 制作可自定义的通知是实现此目的的一种方法。用户可以通过可自定义的警报获得满足自己需求的重要消息。
语法
function Alert(message, alert type)
消息参数获取字符串作为输入，以显示在警报框上。
警报类型 - 消息类型，例如错误、紧急情况等
警报类型参数指定显示的消息类型，例如错误、紧急情况、提示等。
示例 1
我们将使用 Javascript 代码在 HTML 中生成警报消息框。单击按钮将显示警报消息。让我们创建一个简单的警告消息框，并带有一个关闭按钮来结束警告框的显示。
算法
步骤 1 - 初始步骤是编写警告框的 HTML 代码和 CSS 样式代码。您还可以使用任何 CSS 代码来设置警告框的样式。
步骤 2 - 下一步准备 Javascript 代码来设置按钮的操作以显示警告框。为此，请使用 showAlert() 方法，该方法需要两个参数：要显示的消息和警告类型。
步骤 3 - 下一步通过调用 showAlert() 函数显示警告框。我们将向页面上的按钮添加一个事件监听器，该按钮将直接在 JavaScript 部分调用该函数。
步骤 4 − 在此步骤中，向警报方法添加更多参数以自定义警报框。
<!DOCTYPE html>
<html>
<head>
<title>
Window alert() Method in HTML
</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Customizable Alert</h1>
<p>
Click button to get an alert
</p>
<button onclick="myalert()">
Show Alert Message
</button>
<script>
function myalert() {
alert("Hello Tutorials Point Viewersn " +
"click OK to" +
" close me");
}
</script>
</body>
</html>
示例 2
让我们创建一种独特类型的自定义警报框。此警报将在屏幕上显示当前日期和时间。要检查时间，必须单击按钮。这样就会出现一个警报框，上面写有日期和时间。
算法
步骤 1 - 通过编写 HTML 和 CSS 代码启动程序。
步骤 2 - 完成 HTML 后，编写 javascript 函数来设置警报框的基本功能。
步骤 3 - 编写脚本以在警报框上显示当前日期和时间。
<!DOCTYPE html>
<html>
<head>
<title>Custom Alert Box</title>
<style>
.custom-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
.custom-alert h2 {
margin: 0;
}
</style>
</head>
<body>
<button onclick="showCustomAlert()">Show Custom Alert</button>
<script>
function showCustomAlert() {
var currentDate = new Date();
var currentTime = currentDate.toLocaleString();
var alertBox = document.createElement('div');
alertBox.classList.add('custom-alert');
var heading = document.createElement('h2');
heading.textContent = 'Custom Alert';
alertBox.appendChild(heading);
var timeLabel = document.createElement('p');
timeLabel.textContent = 'Current Time and Date: ' + currentTime;
alertBox.appendChild(timeLabel);
document.body.appendChild(alertBox);
}
</script>
</body>
</html>
结论
使用 JavaScript 创建可自定义的警告框可以通过提供更具美感和实用性的与用户沟通方式来改善 Web 应用的用户体验。制作自定义警告框的重要步骤包括为警告框本身编写 HTML 和 CSS，并利用 JavaScript 根据用户输入动态设置样式属性和内容。Web 开发人员在创建需要定期用户输入或通知的用户界面时应牢记这一策略。
