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 相关文章推荐
浅析用prototype定义自己的方法
Nov 14 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
jQuery.each使用详解
Jul 07 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
Nuxt.js实战详解
Jan 18 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
教你如何用node连接redis的示例代码
2018/07/12 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python常用的json标准库
2019/02/19 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
使用python画社交网络图实例代码
2019/07/10 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python错误的处理方法
2020/06/23 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
高二化学教学反思
2014/01/30 职场文书
《尊严》教学反思
2014/02/11 职场文书
公司副总经理任命书
2014/06/05 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书