简单介绍js中的confirm()方法的使用

今天学习了js 中confirm的使用方法


confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。


如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。


在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。


下面我们通过这两个小例子,来了解一下它的使用方法吧:

示例1:
<html>
<head>
<meta charset="uft-8"/>
<title>confrim 的使用方法--例子1</title>
<script type="text/javascript">
function clear1()
{
 if(confirm("确定要清空数据吗?"))
 {
 document.main.text1.value="";//这段代码的作用是使得输入框的内容为空,也就是可以起到清空内容的作用了。
 }
}
</script>
</head>
<boty>
<form name="main">
<input type="text" name="text1"/>
<input type="button" name="submit" value="数据清空" οnclick="return clear1()"/>
</form>
</body>
</html>

示例2:


<html>
<head>
<meta charset="uft-8"/>
<title>js confirm--例子2</title>
<script>
function quetion()
{
 var a=confirm("郭杨和小代是好朋友吗?");
 if(a==true)
 {
 alert("恭喜你答对了!");
 a=false;
 }
 else
 {
 
 alert("你真是猪,这么简单的问题都答不对!");
  a=false;
 }
 }
</script>
</head >
<body οnlοad="quetion()">
</body>
</html>




注意:在例子2中 由于a==true ,程序会一直被执行(死循环),要结束死循环,可以在if条件句后面添加一句 a=false,在if条件句执行完毕之后把a的值变成false跳出程序。


由于自己在网上百度博文时,看到第二个例子中有a==true这个小bug,但是没改正过来。因此想提醒下自己还有跟我一样有看到相同例子的前端小白。
  • 10
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript原生的confirm()函数无法直接自定义按钮文字,但是我们可以通过一些技巧来实现。 一种比较常见的方法使用CSS样式来隐藏原生的按钮,然后在confirm弹框插入我们自己的HTML元素来模拟按钮,并通过JavaScript代码来控制按钮的点击事件。 以下是一个简单的实现例子: HTML代码: ``` <div id="confirm-box"> <p>请确认您的选择</p> <button id="confirm-ok">确定</button> <button id="confirm-cancel">取消</button> </div> ``` CSS代码: ``` #confirm-box button { display: none; } ``` JavaScript代码: ``` function showConfirm() { var confirmBox = document.getElementById('confirm-box'); var confirmOk = document.getElementById('confirm-ok'); var confirmCancel = document.getElementById('confirm-cancel'); confirmBox.style.display = 'block'; // 显示自定义的confirm弹框 confirmBox.style.left = (window.innerWidth - confirmBox.offsetWidth) / 2 + 'px'; // 居显示 confirmBox.style.top = (window.innerHeight - confirmBox.offsetHeight) / 2 + 'px'; // 模拟“确定”按钮的点击事件 confirmOk.onclick = function() { // 用户选择了“确定”按钮 confirmBox.style.display = 'none'; // 隐藏confirm弹框 // 进行相应操作 }; // 模拟“取消”按钮的点击事件 confirmCancel.onclick = function() { // 用户选择了“取消”按钮 confirmBox.style.display = 'none'; // 隐藏confirm弹框 // 进行相应操作 }; } // 调用showConfirm函数以显示自定义的confirm弹框 showConfirm(); ``` 在这个例子,我们使用CSS样式将原生的按钮隐藏起来,然后在confirm弹框插入了我们自己的HTML元素来模拟按钮。最后,通过JavaScript代码来控制按钮的点击事件,并进行相应的操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值