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从头学起第三讲
Jul 06 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
extjs render 用法介绍
Sep 11 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
1.PHP简介
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
react redux入门示例
2018/04/19 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python之pandas用法大全
2018/03/13 Python
解决python 输出是省略号的问题
2018/04/19 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
建筑专业毕业生自荐信
2014/05/25 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript