您的位置：首页 > Web前端 > JavaScript

JavaScript学习（一些基本的互动的方法）

2020-01-15 10:32 417 查看

今天学习js一些基本的互动的方法

 

JavaScript-警告（alert 消息对话框）

[code]<!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>

JavaScript-确认（confirm 消息对话框）

[code]<!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>

JavaScript-提问（prompt 消息对话框）

[code]<!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>

JavaScript-打开新窗口（window.open）

window.open(参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
[code]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('www.baidu.com','_blank','width=1366,height=768,menubar=yes,toolbar=yes, status=yes,scrollbars=yes')

}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>

JavaScript-关闭窗口（window.close）

close()关闭窗口

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口
[code]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close()</title>
<script type="text/javascript">
var mywin=window.open("www.baidu.com");
mywin.close();
</script>
</head>
<body>
</body>
</html>

 

 

任务

1、新窗口打开时弹出确认框，是否打开

提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。

2、通过输入对话框，确定打开的网址，默认为www.baidu.com

3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。

[code]<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

function openWindow(){
var open=confirm("确认新建窗口打开网站吗？");
if(open == true)
{
var url = prompt("请输入网址","www.baidu.com");
if(url != null)
{
window.open(url,'_blank','width=400,height=500,menubar=no,toolbar=no')
}
else{
alert("再见")；
}
}
}
else{
alert("再见");
}
}

</script>
</head>
<body>
<input type="button" value="新窗口打开网站" οnclick="openWindow()" />
</body>
</html>

OK,今天的学习就到这里了

  • 点赞
  • 收藏
  • 分享
  • 文章举报
[url=https://blog.csdn.net/ypxcan]爱你很久。" target=_blank>, [窗口名称], [参数字符串])[/code]

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
[code]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('www.baidu.com','_blank','width=1366,height=768,menubar=yes,toolbar=yes, status=yes,scrollbars=yes')

}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>

JavaScript-关闭窗口（window.close）

close()关闭窗口

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口
[code]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close()</title>
<script type="text/javascript">
var mywin=window.open("www.baidu.com");
mywin.close();
</script>
</head>
<body>
</body>
</html>

 

 

任务

1、新窗口打开时弹出确认框，是否打开

提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。

2、通过输入对话框，确定打开的网址，默认为www.baidu.com

3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。

[code]<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

function openWindow(){
var open=confirm("确认新建窗口打开网站吗？");
if(open == true)
{
var url = prompt("请输入网址","www.baidu.com");
if(url != null)
{
window.open(url,'_blank','width=400,height=500,menubar=no,toolbar=no')
}
else{
alert("再见")；
}
}
}
else{
alert("再见");
}
}

</script>
</head>
<body>
<input type="button" value="新窗口打开网站" οnclick="openWindow()" />
</body>
</html>

OK,今天的学习就到这里了

  • 点赞
  • 收藏
  • 分享
  • 文章举报
[url=https://blog.csdn.net/ypxcan]爱你很久。 发布了14 篇原创文章 · 获赞 3 · 访问量 416 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航