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获得keycode的示例代码
Dec 30 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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+MySQL 制作简单的留言本
2009/11/02 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python获取网页状态码示例
2014/03/30 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
用Python解决计数原理问题的方法
2016/08/04 Python
深入理解python对json的操作总结
2017/01/05 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python elasticsearch环境搭建详解
2019/09/02 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
自主实习接收函
2014/01/13 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
四年级语文教学反思
2016/03/03 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python