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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
vue路由分文件拆分管理详解
Aug 13 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
索趣科技的答案
2007/02/07 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
javascript中this指向详解
2016/04/23 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python实现一个优先级队列的方法
2020/07/31 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
户外拓展活动方案
2014/02/11 职场文书
体育之星事迹材料
2014/05/11 职场文书
工程售后服务方案
2014/06/08 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python