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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
js分页工具实例
2015/01/28 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python中zip()函数用法实例教程
2014/07/31 Python
Python正则表达式的使用范例详解
2014/08/08 Python
Python判断Abundant Number的方法
2015/06/15 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python数据库小程序源代码
2019/09/15 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
实习生的自我评价
2014/01/08 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
夏季药店促销方案
2014/08/22 职场文书
学习十八大标语
2014/10/09 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS