JavaScript实现消息对话框
本文实例为大家分享了JavaScript实现消息对话框的具体代码，供大家参考，具体内容如下
JavaScript弹起对话框的形式有以下三种：
1.只是提醒，不能对脚本产生任何改变;
2.一般用于确认，返回true或者false，所以可以用于if...else...判断;
3.一个带输入的对话框，可以返回用户填入的字符串。
第一种：alert()方法
alert()是这三种对话框中最容易使用的一种，它可以用来简单而明了地将alert()括号内的文本信息显示在对话框中，我们将它称为警示对话框，要显示的信息放置在括号内，该对话框上包含一个“确认”按钮，用户阅读完所显示的信息后，只需点击该按钮就可以关闭对话框。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
function rec(){
var mychar="I love JavaScript";
alert(mychar);
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</html>效果图如下：
第二种：confirm()方法
confirm()和alert()方法的使用十分相似，不同点是在confirm()的对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confirm()方法可以不写window。
代码如下：
<!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>效果图如下：
第三种：prompt()方法
前两种方式仅仅显示已有的信息，但用户不能输入自己的信息，所以如果需要用户可以输入自己的信息，就可以使用prompt()，prompt()不但可以显示信息，而且还提供了一个文本框要求用户键入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容或者初始值，如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，而且prompt()方法交互性最好。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
<script type="text/javascript">
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("你的这次考试的分数","请输入成绩") ;
if(score>=90){
document.write("你很棒!");
}else if(score>=75){
document.write("不错吆!");
}else if(score>=60){
document.write("要加油!");
}else{
document.write("要努力了!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
</body>
</html>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于ECharts地图绘制和钻取简易接口的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ECharts具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
JS中的prototype与面向对象的实例讲解，需要的朋友可以参考一下2013-05-05
本文是对Js中单引号与双引号的使用进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了微信小程序canvas绘制圆角base64图片的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了js+css实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏"，下面我们来简单了解一下吧2019-05-05
这篇文章主要给大家介绍了关于ES7中javascript修饰器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES7具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
bootstrap datetimepicker日期插件使用方法
这篇文章主要为大家详细介绍了bootstrap datetimepicker的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的
这篇文章主要介绍了关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用,需要的朋友可以参考下2017-05-05
这篇文章主要教大家简单实现Bootstrap标签页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论