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 Ajax 全解析
Feb 08 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
javascript的BOM汇总
Jul 16 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
vue组件添加事件@click.native操作
Oct 30 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 strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python suds访问webservice服务实现
2020/06/26 Python
浅析Python面向对象编程
2020/07/10 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
银行求职推荐信范文
2013/11/30 职场文书
党风廉政建设责任书
2014/04/14 职场文书