青岛达内培训
达内青岛中心

17343065216

热门课程

好程序员web前端教程分享浏览器对象模型

  • 时间:2019-06-24
  • 发布:青岛IT培训
  • 来源:青岛IT培训

好程序员web前端教程分享浏览器对象模型,浏览器对象模型( browser object model )

什么是BOM?

好程序员web前端教程分享浏览器对象模型

提起BOM就不得不提起JavaScript的构成。ECMAScript为JavaScript的核心,但是要是在浏览器中使用JavaScript,那么BOM才是JavaScript的核心。

通用的的规定就作为事实上的标准。这个标准就是BOM。

2.BOM的对象:

1)location对象:

*window.location.href=""

这是一个取代跳转链接的页面;

这个方法存在的意义是,让咱们的跳转链接可以操作,可以拼接>>>>这是开发中一种常见的传递数据的方式。

*window.location.reload()

刷新页面的方法。一般情况下给reload()传递一个true,让他刷新,并不使用缓存。

缓存的东西一般为js文件,css文件等。

用这个方法可以让自己不能动的页面动起来了。刷新当前页面。

toSource()方法;

只兼容FF浏览器,其他浏览器不兼容。 这个方法可以查看对象的源码;

语法是 obj.toSource()

2)navigator对象:

navigator.appName 返回获取当前浏览器的名称。

navigator.appVersion 返回 获取当前浏览器的版本号。

navigator.platform 返回 当前计算机的操作系统。

以上属性已经在逐渐被抛弃了。

一个新的属性将替代这些属性。

navigator.userAgent 返回

close()方法

注意 :FF不支持此方法;

alert( )方法>>>这个没啥说的;

confirm( )方法;

confirm("对话框的提示文字")

这个方法有返回值,看到返回值的第一想法就是使用返回值;

var i=confirm("对话框的提示文字");

if(i){

document.write('你确定了')

}else{

document.write('你否定了')

}

prompt()输入框

用法和confirm相同,返回值是你输入的值;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

</head>

<body>

</body>

<script>

window.onload = function() {

function meibumei() {

var i = prompt('请输入我爱凤姐');

if (i == '我爱凤姐') {

document.write('<big><strong>努力吧骚年!!凤姐属于你!!<strong></big>')

} else {

document.write('请好好输入')

meibumei()

}

}

meibumei()

}

</script>k

</html>

3.定时器

setInterval(函数名,执行时间(毫秒))>>>>

每间隔一定时间,就执行一次函数;

进度条 || 倒计时

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

#warp{width: 400px;height: 20px;border: 1px solid #b6b6b6;margin: 100px auto;border-radius: 4px;box-shadow: 0 0 4px #ddd;}

#move{width: 0;height: 20px;background: gray;border-radius: 4px;}

#span1{display: block;float: left;margin-left: 190px;margin-top: -20px;font-family: '微软雅黑';}

.tip{width: 200px;height: 40px;line-height: 40px;margin:40px auto;font-size: 30px}

</style>

<script>

window.onload=function(){

var oMove=document.getElementById('move');

var oWarp=document.getElementById('warp')

var num=0;

var timer;

function biankuan(){

if(num>oWarp.offsetWidth-2){

clearInterval(timer)

window.close()

}else{

num++

oMove.style.width=num+'px'

}

document.getElementById('span1').innerHTML=Math.round(num/oWarp.offsetWidth*100)+'%'

}

timer=setInterval(biankuan,30)

}

</script>

</head>

<body>

<div class="tip">窗口即将关闭</div>

<div id='warp'>

<div id="move">

</div>

<span id='span1'></span>

</div>

</body>

</html>

setTimeout(函数名,执行时间(毫秒))

执行一次

4.一些事件

onload 加载事件网页加载完毕后执行

onscroll 滚动事件

案例:回到顶部

document.documentElement.scrollTop 代表垂直的滚动条,向下滚动的距离

document.body.scrollTop //chrome 代表垂直的滚动条,向下滚动的距离

document.documentElement.scrollLeft

document.body.scrollLeft

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script>

window.onload = function() {

window.onscroll = function() {

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

document.getElementById('div2').innerHTML = scrollTop

}

}

function goBack() {

if (document.body.scrollTop) {

document.body.scrollTop = 0;

} else {

document.documentElement.scrollTop = 0

}

}

</script>

</head>

<style>

#btn,#div2 {position: fixed;width: 80px;height: 80px;bottom: 10px;right: 20px;border: 1px solid #b6b6b6;line-height: 80px;text-align: center;font-family: '微软雅黑';}

#div2 {right: 150px;}

.mark {width: 100%;height: 200px;background: pink;text-align: center;font-size: 50px;font-family: '微软雅黑';color: #fff;line-height: 200px;}

好程序员web前端教程分享浏览器对象模型

body {height: 1000px;}

</style>

<body>

<div class='mark'>这是顶部</div>

<div id="btn" onclick="goBack()">回到顶部</div>

<div id="div2"></div>

</body>

</html>

    以上就是青岛IT培训给大家做的内容详解,更多关于UI的学习,请继续关注青岛IT培训

上一篇:女生适合学习web前端开发吗?
下一篇:学Web前端先搞明白四个问题

马上预约七天免费体验课

姓名:

电话:

如何高效的学习WEB前端?不看你会后悔此时

web前端与后端的区别,还不了解,别说外人看不起你!

学Web前端先搞明白四个问题

好程序员web前端教程分享浏览器对象模型

选择城市和中心
贵州省

广西省

海南省

达内教育

有位老师想和您聊一聊