【JS】几种常用的弹窗

JavaScript025

【JS】几种常用的弹窗,第1张

原生JS 有3种最常用的弹窗方式

最最最常用的是 alert()

alert 引发的弹窗，只有一个“确定”按钮。

alert( 内容 )

内容可以是变量，可以是字符串。

字符串需要用单引号或者双引号括起来。

需要注意的是，内容如果是 html 标签，是会直接输出字符串的。

如果需要换行，需要用到 html 的转义字符。

alert 无法直接展示 object。

confirm 对比 alert，会多出一个“取消”按钮。

而且 confirm 有一个回调值。

如果点击了“确定”，返回值为：true

如果点击了“取消”，返回值为：false

prompt 的比 confirm 多一个输入框。

同样，prompt 也是有返回值的。

如果按了确定，返回值是 输入的内容，字符串型。

如果按了取消，返回值是：null。

js计算器代码，通过弹窗显示步骤如下。

1、js计算器代码编写html，实现计算器页面视图效果。

2、js计算器代码编写，实现点击输入数字和符号输出结果。

3、js计算器代码创建click1函数，判断flag的值，如果是true就定位到第一个输入框，如果是false就定位到第二个输入框，将点击传过来的值与输入框里面的字符串拼接到一起。

4、js计算器代码定义result函数，定位到两个输入框，取出其中的值并转成整数，定位到隐藏输入框，取出里面的符号，然后判断是什么符号，进行相应的运算，弹出运算结果。

为超链接添加onclick()动作，动作内容为弹出对话框。javascript提供了3种类型的对话框：

alert() : 提醒

confirm()：确认，返回 true 或者 false

prompt()：带输入的对话框

下面进行实例演示：

1、HTML结构

   <a href="#" onclick="fun1()">你有一个礼物</a><a href="#" onclick="fun2()">我要接收礼物</a><a href="#" onclick="fun3()">必须先对暗号</a>   

2、javascript代码

   function fun1(){    alert("你得到一个礼物！！")}function fun2(){    if(confirm("确定接收礼物？"))        alert("对一下暗号先...")}function fun3(){    var code = prompt("请对暗号：")    if(code)        alert("给你礼物！！")    else        alert("蒙人呢！")}