JavaScript 弹框输出

308 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 10 天,点击查看活动详情

在我们访问某个网页是,经常会弹出一个对话,有的是广告信息,有的是提示信息,等等一系列内容。

普通弹框

相信大家对 JavaScript 中 alert() 肯定不会陌生、 alert消息对话框通常用于一些对用户的提示信息,例如在表单中输入了错误的数据时。

下面带大家介绍 下JavaScript 中 alert() 的使用说明,alert--弹出消息对话框,并且 alert 消息对话框通常用于一些对用户的提示信息。

 alert("hello www.itbbfx.com")

一行非常简单的代码,神奇结果,

image.png

页面输出

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js 控制语句</title>
</head>

<script>
    document.write("<h2>www.itbbfx.com</h2>"); //将<h2>元素输出到<body></script>
<body>
   <h2></h2>
</body>
</html>

image.png

什么是在 html 输出中使用,什么是文档加载后使用?

代码执行到 document.write 就向页面写入,文档加载完成,但未调用函数,所以不会执行函数中的 document.write,当点击按钮,触发了事件,则是在文档加载完成后使用的 document.write,则会覆盖页面中原有信息。

用 javascript 编写的代码只能通过 html/xhtml 文档才能执行,代码一行一行解析,文档在加载的过程中实际是一边加载一边用 document.write 写出内容到屏幕上,而加载完成后,document 就关闭。如果再调用 document.write 往网页上写内容的话,就会重写 document。

确认框 confirm

confirm() 方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定",此方法返回true,否则返回false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js 控制语句</title>
</head>

<script>
   var b = confirm("确定删除吗?");
    if(b){
        document.write( "<h1>删除成功!</h1>" );
    }else{
        document.write( "<h1>你取消了操作</h1>" );
    }

</script>
<body>
   <h1></h1>
</body>
</html>

image.png

输入框 prompt

prompt()方法用于显示可提示用户进行输入的对话框,这个方法返回用户输入的字符串。默认是文本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js 控制语句</title>
</head>

<script>
  var name = prompt("请输入你的名字:");
document.write( "<h1>大名:"+name+"!</h1>" );

</script>
<body>
   <h1></h1>
</body>
</html>

image.png