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入门之基本函数详解
Oct 21 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery知识点整理
Jan 30 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 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
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
javascript测试题练习代码
2012/10/10 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
使用webpack打包koa2 框架app
2018/02/02 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python实现的检测网站挂马程序
2014/11/30 Python
查看python下OpenCV版本的方法
2018/08/03 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python闭包思想与用法浅析
2018/12/27 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
公司总经理岗位职责范本
2014/08/15 职场文书
婚庆公司计划书
2014/09/15 职场文书
教师学期个人总结
2015/02/11 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js