BOM 介绍
- BOM(Browser Object Model)：浏览器对象模型。
- 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
Window 窗口对象
定时器
- 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
- clearTimeout(标识)：取消一次性定时器。
- 唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
- clearInterval(标识)：取消循环定时器。
加载事件
- window.onload：在页面加载完毕后触发此事件的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window窗口对象</title>
<script>
//一、定时器
function fun(){
alert("该起床了！");
}
//设置一次性定时器
//let d1 = setTimeout("fun()",3000);
//取消一次性定时器
//clearTimeout(d1);
//设置循环定时器
//let d2 = setInterval("fun()",3000);
//取消循环定时器
//clearInterval(d2);
//加载事件
window.onload = function(){
let div = document.getElementById("div");
alert(div);
}
</script>
</head>
<body>
<div id="div">dddd</div>
</body>
<!-- <script>
//一、定时器
function fun(){
alert("该起床了！");
}
//设置一次性定时器
//let d1 = setTimeout("fun()",3000);
//取消一次性定时器
//clearTimeout(d1);
//设置循环定时器
//let d2 = setInterval("fun()",3000);
//取消循环定时器
//clearInterval(d2);
//加载事件
let div = document.getElementById("div");
alert(div);
</script> -->
</html>
Location 地址栏对象
href 属性:
就是浏览器的地址栏。我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL 的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location地址栏对象</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
注册成功！<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
//1.定义方法。改变秒数，跳转页面
let num = 5;
function showTime() {
num--;
if(num <= 0) {
//跳转首页
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//2.设置循环定时器，每1秒钟执行showTime方法
setInterval("showTime()",1000);
</script>
</html>
BOM 小结
BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
- Window：窗口对象
- Location：地址栏对象
- Navigator：浏览器对象
- History：当前窗口历史记录对象
- Screen：显示器屏幕对象
Window 窗口对象
- setTimeout()、clearTimeout()：一次性定时器
- setInterval()、clearInterval()：循环定时器
- onload 事件：页面加载完毕触发执行功能
Location 地址栏对象
- href 属性：跳转到指定的URL 地址
案例 – 动态广告
案例分析和实现
-
在 css 样式中，display 属性可以控制元素是否显示
- display : none 不显示
- display : block 显示
-
设置定时器，3 秒后显示广告图片
-
设置定时器，3 秒后隐藏广告图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<link rel="stylesheet" href="css/news.css"/>
</head>
<body>
<!-- 广告图片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%" style="display: none;"/>
<!--顶部登录注册更多-->
<div class="top">
<a href="#" target="_self">登录 </a>
<a href="#">注册 </a>
<a href="#">更多 </a>
</div>
<!--导航条-->
<div class="nav">
<img src="img/logo.png"/>
<a href="#">首页 </a>/
<a href="#">科技 </a>/
<font color="gray">正文</font>
<hr/>
</div>
<!--左侧分享-->
<div class="left">
<a href="#"> <img src="img/cc.png"/> <span> 评论</span> </a>
<hr/>
<a href="#"> <img src="img/repost.png"/> <span> 转发</span> </a> <br/>
<a href="#"> <img src="img/weibo.png"/> <span> 微博</span> </a> <br/>
<a href="#"> <img src="img/qq.png"/> <span> 空间</span> </a> <br/>
<a href="#"> <img src="img/wx.png"/> <span> 微信</span> </a> <br/>
</div>
<!--中间正文-->
<div class="center">
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
<img src="img/1.jpg" width="100%"/>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<img src="img/2.jpg" width="100%"/>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
</div>
<!--右侧广告图片-->
<div class="right">
<img src="img/ad1.jpg" width="100%"/>
<img src="img/ad2.jpg" width="100%"/>
<img src="img/ad3.jpg" width="100%"/>
<img src="img/ad1.jpg" width="100%"/>
<img src="img/ad2.jpg" width="100%"/>
<img src="img/ad3.jpg" width="100%"/>
</div>
<!--底部页脚超链接-->
<div class="footer">
<a href="#">关于黑马</a>
<a href="#">帮助中心</a>
<a href="#">开放平台</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
</body>
<script>
//1.设置定时器，3秒后显示广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "block";
},3000);
//2.设置定时器，3秒后隐藏广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);
</script>
</html>
news.css
/*顶部样式*/
.top{
background: black; /*背景色*/
line-height: 40px; /*行高*/
text-align: right; /*文字水平右对齐*/
font-size: 20px; /*字体大小*/
}
/*顶部超链接样式*/
.top a{
color: white; /*超链接颜色*/
}
/*导航条样式*/
.nav{
line-height: 40px; /*行高*/
}
/*左侧分享样式*/
.left{
width: 20%; /*宽度*/
text-align: center; /*文字水平居中对齐*/
float: left; /*浮动*/
}
/*左侧分享图片样式*/
.left img{
width: 38px;
height: 38px;
}
/*左侧文字*/
.left span{
vertical-align: 50%; /*文字垂直居中对齐*/
}
/*中间正文样式*/
.center{
width: 60%; /*宽度*/
float: left; /*浮动*/
}
/*右侧广告图片样式*/
.right{
width: 20%; /*宽度*/
float: left; /*浮动*/
}
/*底部页脚超链接样式*/
.footer{
clear: both; /*清除浮动*/
background: blue; /*背景色*/
text-align: center; /*文字水平居中对齐*/
line-height: 25px;
}
/*底部页脚超链接文字颜色*/
.footer a{
color: white;
}
/*超链接样式*/
a{
text-decoration: none; /*去除下划线*/
color: black; /*超链接颜色*/
}
/*超链接悬浮样式*/
a:hover{
color: red; /*悬浮颜色*/
}
封装思想
- 封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
- 获取元素的方法
- document.getElementById(id值)：根据id 值获取元素
- document.getElementsByName(name值)：根据name 属性值获取元素们
- document.getElementsByTagName(标签名)：根据标签名获取元素们
我们之前的操作都是基于原生JavaScript 的，比较繁琐。 JQuery是一个前端框架技术，针对JavaScript 进行了一系列的封装，使得操作变得非常简单！ 期待吧……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装</title>
</head>
<body>
<div id="div1">div1</div>
<div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
let div1 = getById("div1");
alert(div1);
// let div1 = document.getElementById("div1");
// alert(div1);
// let divs = document.getElementsByName("div2");
// alert(divs.length);
// let divs2 = document.getElementsByTagName("div");
// alert(divs2.length);
</script>
</html>
my.js
function getById(id){
return document.getElementById(id);
}
function getByName(name) {
return document.getElementsByName(name);
}
function getByTag(tag) {
return document.getElementsByTagName(tag);
}
扫一扫
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
