[网页编程]-13 JavaScript BOM对象中常用的方法
注意,下面所有方法中的Window是可以省略的
弹窗
第一种
只有确定按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 三种弹框方式 */
//第一种
function tk1(){
//window可以省
window.alert("第一种弹框方式");
}
</script>
</head>
<body>
<p>
<input type="button" name="" id="" value="弹框1" onclick="tk1()" />
</p>
</body>
</html>
第二种
含有确定和取消按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 三种弹框方式 */
//第二种 含有选择按钮 ok 返回true cancel 返回false
function tk2(){
var flag = window.confirm("是否删除")
alert(flag)
}
</script>
</head>
<body>
<p>
<input type="button" name="" id="" value="弹框B" onclick="tk2()" />
</p>
</body>
</html>
第三种
含有输入框 以及选择按钮 括号内的第二个参数是在输入框内显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 三种弹框方式 */
//第三种 含有输入框 以及选择按钮 括号内的第二个参数是在输入框内显示
function tk3(){
var flag1 = window.prompt("请输入","例如:超超哥哥");
alert(flag1);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="弹框C" onclick="tk3()" />
</p>
</body>
</html>
三种弹框整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 三种弹框方式 */
//第一种 含有确定按钮
function tk1(){
//window可以省
window.alert("第一种弹框方式");
}
//第二种 含有选择按钮 ok 返回true cancel 返回false
function tk2(){
var flag = window.confirm("是否删除");
alert(flag)
}
//第三种 含有输入框 以及选择按钮 括号内的第二个参数是在输入框内显示
function tk3(){
var flag1 = window.prompt("请输入","例如:超超哥哥");
alert(flag1);
}
</script>
</head>
<body>
<p>
<input type="button" name="" id="" value="弹框A" onclick="tk1()" />
</p>
<p>
<input type="button" name="" id="" value="弹框B" onclick="tk2()" />
</p>
<p>
<input type="button" name="" id="" value="弹框C" onclick="tk3()" />
</p>
</body>
</html>定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//定时器
function getTime(){
//声明时间对象
var date = new Date();
//获取时间
var time =date.toLocaleString();
//获得id名称是span_1 的对象
var span =document.getElementById("span_1");
//存入网页
span.innerHTML=time;
}
//1s之后进行方法调用 调用次数1次 1000是毫秒=1s
/* window.setTimeout("getTime()",1000); */
// 每间隔1s就会进行方法调用 调用多次
window.setInterval("getTime()",1000);
</script>
</head>
<body onload="getTime()">
当前系统时间是:<span id="span_1"> </span>
</body>
</html>
停止时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//定时器
function getTime(){
//声明时间对象
var date = new Date();
//获取时间
var time =date.toLocaleString();
//获得id名称是span_1 的对象
var span =document.getElementById("span_1");
//存入网页
span.innerHTML=time;
}
//1s之后进行方法调用 调用次数1次 1000是毫秒=1s
/* window.setTimeout("getTime()",1000); */
// 每间隔1s就会进行方法调用 调用多次
var in1 = window.setInterval("getTime()",1000);
function stopTime(){
//清楚定时器操作
window.clearInterval(in1);
}
</script>
</head>
<body onload="getTime()">
当前系统时间是:<span id="span_1"> </span>
<p>
<input type="button" name="" id="" value="停止时间" onclick="stopTime()" />
</p>
</body>
</html>
打开或者关闭浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 打开窗口 (是开启新窗口)*/
function demo1(){
window.open("https://www.baidu.com/")
}
/* 关闭窗口 (关闭当前窗口)*/
function demo2(){
window.close();
}
</script>
</head>
<body>
<p>
<input type="button" name="" id="" value="打开窗口并跳转相应链接" onclick="demo1()" />
</p>
<p>
<input type="button" name="" id="" value="关闭窗口" onclick="demo2()"/>
</p>
</body>
</html>网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
赞同 0
评论 0 条
相关文章
-
[网页编程]-04 javascript 数据类型
2023-12-27
68252 浏览
JS中的数据类型number（数字类型的数据）string（字符串类型）boolean（布尔数据类型）object（对象类型）JS中特殊数据类型undefined(未定义)NaN(不是一个数字)notanumbernull(空对象)
-
关注我们
扫一扫关注公众号
添加我为好友，拉您入交流群！
添加我为好友，拉您入交流群！
请使用微信扫一扫!
-