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 MD4
Dec 20 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
移动端js图片查看器
Nov 17 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
javascript 写类方式之九
2009/07/05 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python实现动态数组的示例代码
2019/07/15 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
老师自我鉴定范文
2013/12/25 职场文书
作文评语集锦大全
2014/04/23 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书