confirm确认对话框的实现方法总结


Posted in Javascript onJune 17, 2016

还记得之前的javascript入门里的讲的confirm 消息对话框吗?不记得也没关系,我们先来回顾一下,然后在详细讲它。

复习:

confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:

confirm(str);

参数说明:

str:在消息对话框中要显示的文本返回值: Boolean值返回值:

当用户点击"确定"按钮时,返回true当用户点击"取消"按钮时,返回false注: 通过返回值可以判断用户点击了什么按钮

看下面的代码:

<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗?");
  if(mymessage==true)
  {  document.write("很好,加油!");  }
  else
  { document.write("JS功能强大,要学习噢!");  }
</script>

结果:

confirm确认对话框的实现方法总结

 

消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。

任务

使用confirm()提示框,当点击按钮时,完成性别确认。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
 <script type="text/javascript">
 function rec(){
  var mymessage=confirm("你是女士!");
  if(mymessage==true)
  {
    document.write("你是女士!");
  }
  else
  {
    document.write("你是男士!");
  }
 }  
 </script>
</head>
<body>

  <input name="button" type="button" onClick="rec()" value="点击我,弹出确认对话框" />
</body>
</html>

 

结果:confirm确认对话框的实现方法总结

延伸:

之前有说过,功能的话最好用函数来写,那样的话每一个函数都是一个功能,以后有用到这些功能的话,就可以直接用了。即复用。所以要习惯这样哦。。。。。。

就像上面那个例子

<script language="JavaScript">

function confirm (){

  var msg=confirm("你是女士!");

  if(msg==true)

  {

    document.write("你是女士!");

  }

  else

  {

    document.write("你是男士!");

  }

 }  

 </script>

然后给input调用函数,加个onClick="confirm ()"最后对javascript window.confirm做个小结

第一种:

就是上面我们提到的那种方法

<script language="JavaScript"> 

function confirm (){

  var msg=confirm("你是女士!");

  if(msg==true)

  {

    document.write("你是女士!");

  }

  else

  {

    document.write("你是男士!");

  }

 }  

 </script>
<input name="button" type="button" onClick="confirm()" value="点击我,弹出确认对话框" />

第二种:

在标签中写:

1.

<a href="javascript:if(confirm('确实要删除该内容吗?')) location='#'">删除</a>

2 .

<a href="#" onclick= "if(confirm( '确实要删除该内容吗?')==false)return false; ">点击确定</a>

想简单点调用的话 也可以这样

代码如下:

<a href="#" onclick= "return confirm('确实要删除该内容吗?');">删除</a>

第三种:

 

<script language="JavaScript">

function del_confirm(e)

{

if (event.srcElement.outerText == "删除")

{

event.returnValue = confirm("删除是不可恢复的,你确认要删除吗?");

}

}

document.onclick = delete_confirm;

</script>

 

<a href="#" onClick="del_confirm">删除</a>

第四种:

<script language="JavaScript">

function del_confirm()

{

event.returnValue = confirm("删除是不可恢复的,你确认要删除吗?");

}

</script>
<a href="http://www.baidu.com" onClick="del_confirm()">删除</a>

以上就是小编为大家带来的confirm确认对话框的实现方法总结全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
tab栏切换原理
Mar 22 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 #Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 #Javascript
基于JQuery实现分隔条的功能
Jun 17 #Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 #Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 #Javascript
jQuery animate easing使用方法图文详解
Jun 17 #Javascript
JS常用字符串方法(推荐)
Jan 15 #Javascript
You might like
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python添加模块搜索路径方法
2017/09/11 Python
Django中的forms组件实例详解
2018/11/08 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
python实现单机五子棋
2020/08/28 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
教师自我评价范文
2013/12/16 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
爱护公物主题班会
2015/08/17 职场文书
2019入党申请书格式
2019/06/25 职场文书