深入学习JavaScript中的bom


Posted in Javascript onMay 27, 2019

BOM(Broswer Object Model)

凡是 window 的属性和方法,均可以省略“window.”

方法:

框窗

1.警告框

window.alert("msg");

2.确认框

window.confirm("msg");

3.询问框

window.prompt("msg","defaulvalue")

页面

1.打开一个窗口

window.open()

2.在子窗口中使用,表示父窗口的window对象

window.opener

window.opener.fatherSayHello(); 调用父窗口的方法
window.opener.a

3.关闭当前窗口

window.close()

window.close(); 关闭当前
window.opener.close(); 关闭父窗口

定时任务

1.定时任务

var taskid = window.setTimeout(function,ms);
window.setTimeout("alert('hello!')", 5000);

2.间隔执行任务

var taskid = window.setInteval(function,ms);

3.清除定时任务

window.clearTimeout(taskid);

4.清除间隔执行任务

window.clearInteval(taskid);

打印屏幕

//长*宽
console.log(screen.width + "*" + screen.height)

后退

window.history.back();

前进

window.history.forward();

刷新

window.location.reload();//刷新
window.location.href = window.location.href;//刷新

Go 前进(x)步,后退(x)步,刷新(0),

window.history.go(x)

链接

window.location.href = http://www.baidu.com;

用户代理 浏览器内核

console.log(window.navigator.userAgent)

框窗

//凡是window的属性和方法,均可以省略“window.”
<script type="application/javascript">
// 警告框
function testAlert(){
var result=window.alert("这是一个警告框")
console.log(result);
}
// confirm 确认框
function testConfirm(){
var result =window.confirm("你确认要离开了吗?");
if(result){
alert("欢迎下次再来!")
}else{
alert("那你在逛逛吧!")
}
consol.log(result);
}
// prompt 询问框
function testPrompt(){
var result = window.prompt("请输入U盾密码","例如:123456");
console.log(result);
}
</script>
<body>
<button onclick="testAlert();">testAlert</button>
<button onclick="testConfirm();">testConfirm</button>
<button onclick="testPrompt();">testPrompt</button>
</body>

页面

//子页面
<script type="application/javascript">
function sayHello(){
alert("hello world")
}
//打开一个窗口
function callFatherMethod(){
window.opener.fatherSayHello();
window.opener.a
}
//关闭本窗口
function testClose(){
window.close();
}
//关闭父窗口
function testFatherClose(){
window.opener.close();
}
</script>
<body>
<button onclick="callFatherMethod()">调用父窗口的方法</button>
<button onclick="testClose()">关闭本窗口</button>
<button onclick="testFatherClose()">关闭父窗口</button>
</body>
//父页面
<script type="application/javascript">
var a = 10;
window.onload = function(){
console.log(window);
console.log("11111111111")
}
//打开一个新窗口
function testOpen(){
var sonwindow = window.open("son.html","aaa","height=300,width=500,top=50,left=50,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")
//子窗口的window对象
console.log(sonwindow);
}
function fatherSayHello(){
alert("hello son!");
}
</script>
<body>
<button onclick="testOpen();">打开一个新窗口</button>
</body>

定时任务

<script type="application/javascript">
function setTime() {
// window.setTimeout("alert('hello!')",5000);
window.setTimeout(sayHello, 5000);
}
var sayHello = function () {
alert("你好!");
}
</script>
</head>
<body>
<button onclick="sayHello();">调用sayHello</button>
<button onclick="setTime();">调用setTime</button>

间隔执行任务

<script type="application/javascript">
/*
window.onload = function(){
window.setTimeout(closeSelf, 1000);
}
function closeSelf() {
var secval = document.getElementById("sec").innerHTML;
var secint = parseInt(secval);
document.getElementById("sec").innerHTML = --secint;
if(secint == 0){
window.close();
}
window.setTimeout(closeSelf, 1000);
}
*/

var taskid = 0;
window.onload = function(){
//间隔执行任务,间隔 1000ms 执行一次
taskid = window.setInterval(closeSelf, 1000);
}
function closeSelf() {
//获取 10s 
var secval = document.getElementById("sec").innerHTML;
console.log(secval);
var secint = parseInt(secval);
console.log(secint);
//10s 减减
document.getElementById("sec").innerHTML = --secint;
if(secint == 0){
window.close();
}
}
// 4.清除间隔执行任务 暂停
function stopTask(){
window.clearInterval(taskid);
}
//继续计时
function goonTask(){
taskid = window.setInterval(closeSelf, 1000);
console.log(taskid)
}
</script>
<body>
付款成功,页面将在<span id="sec">10</span>s后关闭。
<button onclick="stopTask()">稍等,待会我会自己关闭</button>
<button onclick="goonTask()">继续读秒,关闭窗口</button>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
php swoft框架实例用法
2020/12/22 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python二分查找算法的递归实现方法
2016/05/12 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python实现简单的2048小游戏
2021/03/01 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
学期自我鉴定范文
2013/10/01 职场文书
实习护士自我鉴定
2013/10/13 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
政审证明材料
2015/06/19 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android