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-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
JavaScript中document.referrer的用法详解
Jul 04 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
Vue项目打包编译优化方案
Sep 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小偷程序)
2014/08/23 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js实现常用排序算法
2016/08/09 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python 装饰器使用详解
2017/07/29 Python
python清除函数占用的内存方法
2018/06/25 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
五型班组建设方案
2014/02/10 职场文书
四查四看整改措施
2014/09/19 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
小学四年级作文之写景
2019/08/23 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS