文章目录
一、BOM 对象
1. BOM 介绍
BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。
2. 对象方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpmFE12u-1577963561544)(assets\setInterval函数2.png)]
周期性定时器
作用：每隔一段时间就执行一次代码
//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
function : 需要执行的代码,可以传入函数名;或匿名函数
interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/
关闭定时器 :
//关闭指定id对应的定时器
clearInterval(timerID);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pdkSueGN-1577963561546)(assets\setTimeout函数3.png)]
一次性定时器
作用：等待多久之后执行一次代码
//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);
3. 对象属性
window的大部分属性又是对象类型
-
history
作用：保存当前窗口所访问过的URL
属性 : length 表示当前窗口访问过的URL数量
方法 :back() 对应浏览器窗口的后退按钮，访问前一个记录 forward() 对应前进按钮，访问记录中的下一个URL -
location
作用：保存当前窗口的地址栏信息(URL)
属性 : href 设置或读取当前窗口的地址栏信息
方法 :reload(param) 重载页面(刷新) 参数为布尔值，默认为 false，表示从缓存中加载，设置为true,强制从服务器根目录加载
二、DOM节点操作
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）
1. 节点对象
JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。
2. 访问节点
- 元素节点 ( 操作标签）
- 属性节点（操作标签属性）
- 文本节点（操作标签的文本内容）
标签属性都是元素节点对象的属性,可以使用点语法访问，例如：
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
- 属性值以字符串表示
- class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；
3. 操作元素样式
- 为元素添加 id、class属性，对应选择器样式
- 操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意 :
- 属性值以字符串形式给出，单位不能省略
- 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize
4. 模拟点击
-
click() 方法可模拟在按钮上的一次鼠标单击。
-
语法：
buttonObject.click();参数 buttonObject 表示按钮元素对象。
练习:
一.日期时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var dt=new Date();
console.log(dt);
//使用日期对象方法获取具体日期时间
var y=dt.getFullYear();
console.log(y);
var month=dt.getMonth()+1;
console.log(month);
var d=dt.getDate();
console.log(d);
var h=dt.getHours();//小时
console.log(h);
var M=dt.getMinutes();//分
console.log(M);
var s=dt.getSeconds();//秒
console.log(s);
//创建指定日期对象
var dt2=new Date('2020-1-3 0:0:0')
console.log(dt2);
//计算时间差
var t=dt2-dt;
console.log(Math.floor(t/1000/60/60))//毫秒数; 1s=1000ms
</script>
</body>
</html>
二.弹框,确认框.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bom</title>
</head>
<body>
<button id="btn">删除</button>
<script>
//alert()
//prompt()
//确认框
//当btn被点击是 弹出确认框 提示用户删除
//r如果确认 弹框提示删除成功
window.onload=function(){
var btn=document.getElementById('btn');
btn.onclick=function(){
//confirm会根据用户的选择返回不同结果
var isDel=confirm('确认要删除吗?');
//确定返回ture 取消返回false
console.log(isDel);
if (isDel){
alert('删除成功');
}
else{
alert('已取消删除');
}
}
}
</script>
</body>
</html>
三.周期定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>timer</title>
</head>
<body>
<button id="btn">停止定时器</button>
<script>
//周期定时器
function sayHello(){
alert('hello world')
}
//setInterval (函数名,时间间隔)
//时间间隔的单位是毫秒 1000毫秒=1秒
// var timer=setInterval(sayHello,3000);//创建定时器
// console.log(timer);
// //停止定时器(清除周期性定时器)
// var btn=document.getElementById('btn');
// btn.οnclick=function(){
// clearInterval(timer); //清除定时器
// alert('已停止')
// }
//通常用于延时做某些事情
var timer=setTimeout(sayHello,3000);//创建一次性定时器
console.log(timer);
clearTimeout(tmer);//清除一次性定时器
timer=null;//清空保存定时器的变量
console.log(timer);
</script>
</body>
</html>
四.history属性
1.c页面
<body>
<h1>c页面</h1>
<a href="#" onclick="history.back();">上一页</a>
</body>
</html>
2.b页面
<body>
<h1>b页面</h1>
<a href="#" onclick="history.back();">上一页</a>
<a href="#" onclick="history.forward();">下一页</a>
<a href="04-c.html" >去往c页面</a>
</body>
3.a页面
<body>
<h1>a页面</h1>
<a href="04-b.html" ">去往b页面</a>
<a href="#" onclick="history.forward()">下一页</a>
</body>
五location属性,获取当前页面地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">go Tmooc</button>
<script>
//location保存浏览器地址栏内容
console.log(location.href);
var btn=document.getElementById('btn')
btn.onclick=function(){
//直接对href赋值 相当于跳转到该地址
location.href='http://tmooc.cn'
}
</script>
</body>
</html>
六.Dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dom</title>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<div id="d1" class="red" >
div中的演示文字
</div>
<script>
window.onload=function(){
var div=document.getElementById('d1');//通过id查找元素
var div =document.getElementsByClassName('red')[0];//通过类属性查找
var div =document.getElementsByTagName('div')[0];//通过标签名查找
//对元素内容操作
console.log(div.innerHTML);
console.log(div.innerText);
div.innerHTML='2020-1-2';//修改标签内容
// div.innerText='2020';
//对元素属性的操作
//找到的div是一个dom对象 对象.属性
console.log(div.id);
div.id='div1';
console.log(div.id);
div.className='blue';
console.log(div.style);
div.style.backgroundColor='lightblue';
div.style.fontSize='50px';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dateExer</title>
<style>
/* div{
margin: 0 auto;
} */
</style>
</head>
<body>
<!-- 在页面中显示但前时间 -->
<div id="show"></div>
<script>
window.onload=function(){
//补零 如果当前值小于10的时候 需要补零变成字符串
function addZero(num){
// if(num<10){
// return num='0'+num;
// }
// else{
// return num+"";
// }
return num<10?num='0'+num:num+"";
}
var div=document.getElementById('show');
//获取当前事件对象,从当前时间对象获取 h m s
//拼接字符串 "15:11:30" 将字符串放入div中
function timer(){
var dt=new Date();
var h=dt.getHours();
h=addZero(h);
var m=dt.getMinutes();
m=addZero(m);
var s=dt.getSeconds();
s=addZero(s);
div.innerHTML=h+':'+m+':'+s;
div.style.fontSize='50px';
div.style.color='red';
}
// function shuxin(){
// location.reload();
// }刷新
//自动刷新页面 每隔一秒刷新一次
//页面每次刷新都会重新向服务器发送请求
//反复刷新会重复发送无效信息
}
timer();//先手动调用一次 定时器隔1秒启动8
var timer=setInterval(timer,1000)
</script>
</body>
</html>
七
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* #show{
text-align: center;
} */
</style>
</head>
<body>
<div id="show"></div>
<script>
window.onload=function(){
//倒计时
//获取当前的时间 nowtime
//获取18:00的时间对象 endtime
// 获取时间差endtime-nowtime
// 通过时间差计算出h m s
function addZieo(num){
return num<10?num='0'+num:num+"";
}
function timerr(){
div=document.getElementById('show')//全局div
var dt1=new Date();
var dt2=new Date("2020-1-2 18:00:00");
var dt=dt2-dt1;
// console.log(dt)
var leftTime=Math.floor(dt/1000);
// console.log(leftTime);
var h=Math.floor(leftTime/3600);
h=addZieo(h) ; //将 h m s补零
var m=Math.floor((leftTime-h*3600)/60);
m=addZieo(m);
var s=Math.floor(leftTime-h*3600-m*60);
s=addZieo(s);
div.innerHTML='距离下课还有'+h+':'+m+':'+s; //显示在div中
}
timerr();
var timmer=setInterval(timerr,1000);
div.style.fontSize='50px';
div.style.color='red';
div.style.textAlign='center';
}
</script>
</body>
</html>
八.彩票题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#d1{
display: inline;
}
</style>
</head>
<body>
<div id="d1"></div>
<button id="btn">换一换</button>
<script>
var btn=document.getElementById('btn');
var div=document.getElementById('d1');
function randomArr(max,num){
//_arr是模拟的一个私有变量
var _arr=[];
//生成随机数 将随机数的值放入数组_arr
//重复number次
for(i=0;_arr.length<num;i++){
//去重
//遍历已有的列表 判断当前的随机数的值是否在列表中
//_arr
//如果不在将添加
var rn = Math.floor(Math.random()*max+1);//随机数
// var din=true;
var value=_arr.indexOf(rn);
if(value==-1){
_arr.push(rn);
}
}
return _arr;
}
div.innerHTML='33,22,10,9,1,220';
btn.onclick= function(){
arr=randomArr(33,6);
div.innerHTML=arr;
}
</script>
</body>
</html>
扫一扫
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
