回顾JS如何向网页中输入内容,与浏览器窗口进行交互
程序员文章站
2022-06-22 08:33:52
分享JS如何向网页中输入内容，如何与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现。 2-1JavaScript-输出内容（document.write） 2-2JavaScript-警告（alert消息对话框） 2-3JavaScript-确认（confirm消息对话... ......
第2章 请和我互动（常用互动方法）
本章节主要讲解如何向网页中输入内容，如何与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现。
- 2-1 javascript-输出内容（document.write）
- 2-2 javascript-警告（alert 消息对话框）
- 2-3 javascript-确认（confirm 消息对话框）
- 2-4 javascript-提问（prompt 消息对话框）
- 2-5 javascript-打开新窗口（window.open）
- 2-6 javascript-关闭窗口（window.close）
- 2-7 编程练习
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript-输出内容（document.write）</title>
6 <script type="text/javascript">
7 //1.内容用""括起来，直接输出内容
8 document.write('今天2020-4-8');
9
10 //2.通过变量输出内容
11 var ceshi="12：32";
12 document.write(ceshi);
13
14 //3.输出多项内容，之间用+号连接起来
15 var myceshi="document.write输出";
16 document.write("javascript"+myceshi);
17
18 //4.输出html标签，标签使用""括起来
19 var mystr="今天心情怎么样?";
20 document.write("<br />"+mystr+" "+"答：一般般");
21 </script>
22 </head>
23 <body>
24 </body>
25 </html>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>alert()消息对话框</title>
6 <script type="text/javascript">
7 //alert(字符串或者是变量);
8 var mynum=30;
9 alert("hello");
10 alert(mynum);
11 </script>
12 </head>
13 <body>
14 <!--alert弹出消息对话框(包含一个确定按钮)。-->
15 <img src="images/demo2-2-1.jpg" >
16 <img src="images/demo2-2-2.jpg" >
17 </body>
18 </html>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript-确认（confirm 消息对话框</title>
6 <script type="text/javascript">
7 //confirm(str);str：在消息对话框中要显示的文本
8 var mystr=confirm("话说今天你很好看呀");
9 if(mystr==true){
10 alert("笑，老实人就爱说实话");
11 }
12 else{
13 alert("别骗我，刚我还听到你说不好看")
14 }
15 </script>
16 </head>
17 <body>
18 <p>弹出框类似下图:</p>
19 <img src="images/demo2-3.jpg" >
20 </body>
21 </html>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript-提问（prompt 消息对话框）</title>
6 <script type="text/javascript">
7 var myname=prompt("请输入你的姓名");
8 if(myname!=null){
9 alert("你好"+myname);
10 }
11 else{
12 alert("你好，陌生人")
13 }
14 </script>
15 </head>
16 <body>
17 <!-- 语法:
18 prompt(str1, str2);
19 参数说明：
20 str1: 要显示在消息对话框中的文本，不可修改
21 str2：文本框中的内容，可以修改
22 返回值:
23 1. 点击确定按钮，文本框中的内容将作为函数返回值
24 2. 点击取消按钮，将返回null -->
25 <img src="images/demo2-4.jpg" >
26 </body>
27 </html>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript-打开新窗口（window.open）</title>
6 <script type="text/javascript">
7 // window.open([url], [窗口名称], [参数字符串])
8 function rec(){
9 window.open('http://www.dhnblog.com/','_blank','width=300,height=200,left=0,menubar=yes,toolbar=yes,scrollbars=yes,status=no')
10 }
11 </script>
12 </head>
13 <body>
14 <!-- url：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
15 窗口名称：可选参数，被打开窗口的名称。
16 1.该名称由字母、数字和下划线字符组成。
17 2."_top"、"_blank"、"_self"具有特殊意义的名称。
18 _blank：在新窗口显示目标网页
19 _self：在当前窗口显示目标网页
20 _top：框架网页中在上部窗口中显示目标网页
21 3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
22 4.name 不能包含有空格。
23 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。 -->
24 <input type="button" name="" id="" value="点我打开新窗口" onclick="rec()"/>
25 <br />
26 <img src="images/demo2-5.jpg" >
27 </body>
28 </html>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript-关闭窗口（window.close）</title>
6 <script type="text/javascript">
7 // window.close(); //关闭本窗口
8 // <窗口对象>.close(); //关闭指定的窗口
9
10 // window.open('http://www.dhnblog.com/','_blank','top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes');
11 //window.close();
12
13 var mywin=window.open('http://www.dhnblog.com/','_blank','top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes');
14 // //将新打的窗口对象，存储在变量mywin中
15 mywin.close();
16 </script>
17 </head>
18 <body>
19 <p>上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。</p>
20 </body>
21 </html>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>编程练习</title>
6 <script type="text/javascript">
7 /* 1、新窗口打开时弹出确认框，是否打开
8 提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。
9 2、通过输入对话框，确定打开的网址，默认为 http://www.dhnblog.com/
10 3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。*/
11
12 // var str=confirm('是否打开新窗口');
13 // if(str==true){
14 // window.open('http://www.dhnblog.com/','_blank','width=400,height=500,menubar=no,toolbar=no')
15 // }
16
17 // function myceshi(){
18 // var ceshi=prompt('是否打开新窗口','http://www.dhnblog.com/');
19 // if(ceshi!=null){
20 // window.open('http://www.dhnblog.com/','_blank','width=400,height=500,menubar=no,toolbar=no')
21 // }
22 // }
23
24
25 //正确代码，上面为演示
26 function myceshi(){
27 if(confirm('确定打开新窗口吗')){
28 var url = prompt('请输入一个网址','http://www.dhnblog.com/')
29 window.open(url,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400")
30 }
31 }
32
33 </script>
34 </head>
35 <body>
36 <input type="button" name="" id="" value="点击打开新窗口" onclick="myceshi()" />
37 </body>
38 </html>
上一篇： 面试刷题:如何应对高并发？
下一篇： 五花肉要腌制吗