欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

回顾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+"&nbsp;&nbsp;"+"答:一般般");
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>