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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js Function类型
Dec 04 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
JavaScript实现拖拽效果
Mar 16 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读取汉字的点阵数据
2015/06/22 PHP
PDO::inTransaction讲解
2019/01/28 PHP
PHP反射实际应用示例
2019/04/03 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
python求pi的方法
2014/10/08 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python读写json文件的简单实现
2017/04/11 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
详解flask入门模板引擎
2018/07/18 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python二元赋值实用技巧解析
2019/10/25 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
春节联欢晚会主持词
2014/03/24 职场文书
毕业论文评语大全
2014/04/29 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年教师节感言
2015/08/03 职场文书
汽车销售员工作总结
2015/08/12 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
《自己去吧》教学反思
2016/02/16 职场文书