文章目录
日期对象
1. 创建日期对象
1. var date2 = new Date("2011/11/11");
2. var date3 = new Date("2011/11/11 11:11:11");
2. 日期对象方法
- 读取或设置当前时间的毫秒数：getTime()
- 获取时间分量
- getFullYear()
- getMonth()
- getDate()
一、BOM 对象
1. BOM 介绍
BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。
2. 对象方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GswMELUZ-1577963497110)(assets\setInterval函数2.png)]
周期性定时器
作用：每隔一段时间就执行一次代码
//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
function : 需要执行的代码,可以传入函数名;或匿名函数
interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/
关闭定时器 :
//关闭指定id对应的定时器
clearInterval(timerID);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sUDKdNOB-1577963497112)(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 表示按钮元素对象。
日期对象代码
<body>
<script>
var dt = new Date();
console.log(dt);
//使用日期对象方法获取 年月日
var y = dt.getFullYear();
console.log(y);
var m = dt.getMonth() + 1;
console.log(m);
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(t); // 毫秒数 1s = 1000ms
// 求还有多少小时
console.log(t / 1000 /60 / 60);
</script>
</body>
confirm确认框代码练习
<body>
<button id="btn">删除</button>
<script>
// alert()
// prompt()
// 当btn被点击时,弹出确认框,提示用户是否删除
// 如果确认 弹框提示删除成功
window.onload = function(){
// 查找btn
var btn = document.getElementById("btn");
btn.onclick = function(){
// confirm 会根据用户的选择返回不同的结果.
var isDel = confirm("确定要删除吗?")
// 如果用户点击确定 返回true
// 点击取消则 返回false
if (isDel){
alert("删除成功")
}
}
}
</script>
</body>
周期性定时器练习
每三秒弹出一个框.当点击清除周期性定时器的时候,停止弹框.
<body>
<button id="btn">清除周期性定时器</button>
<script>
// 周期性定时器
//
function sayHello(){
alert("hello world");
}
// 创建周期性定时器
var timer = setInterval(sayHello,3000);
// 停止定时器(清除周期性定时器)
// clearInterval(timer);
var btn = document.getElementById("btn");
btn.onclick = function(){
clearInterval(timer);
alert("已停止弹框")
}
</script>
</body>
一次性定时器
<body>
<script>
function sayHello(){
alert("hello world");
}
// 创建一次性定时器
// 通常用于延时操作
var timmer = setTimeout(sayHello,3000)
console.log(timmer);
clearTimeout(timmer); // 清除一次性定时器
timmer = null;
console.log(timmer);
</script>
</body>
location对象的href属性练习
跳转到某一个页面
<body>
<button id="btn">Tmooc</button>
<script>
console.log(location.href);
document.getElementById("btn").onclick = function(){
location.href = "http://www.tmooc.cn/"
}
</script>
</body>
做一个页面时间显示器
<body>
<!-- 在页面中显示当前的时间 -->
<div id="show"></div>
<script>
window.onload = function(){
// 补零
// 2 ----02
// 如果当前的值小于10 需要将当前的值补零变成字符串替换
// function addZero(num){
// if (num<10){
// return "0"+num;
// }else{
// return num+"";
// }
// }
function addZero(num){
return num<10 ? "0"+num:num+"";
}
var div = document.getElementById("show");
function timmer(){
// 获取当前时间对象
var dt = new Date();
// 获取 h m s 时分秒
var h = dt.getHours();
h = addZero(h);
var m = dt.getMinutes();
m = addZero(m);
var s = dt.getSeconds();
s = addZero(s);
// 拼接一个字符串 15:11:30
var time = h + ":" + m + ":" + s;
console.log(time);
// 将字符串放入div
div.innerText = time;
}
// 定时器1秒后才启动,所以先启动一次.
timmer();
// 周期定时器实现 实时时间
setInterval(timmer,1000)
// 自动刷新页面 实现实时时间
// 每1000毫秒刷新一次页面
// setInterval(function(){
// location.reload();
// },1000);
}
</script>
</body>
做一个倒计时的时间练习
<style>
.d1{
text-align: center;
font-size: 50px;
background-color: rgb(185, 231, 231);
color:rgb(2, 2, 2)
}
</style>
</head>
<body>
<div id="show"></div>
<script>
window.onload = function(){
function addZero(num){
return num<10 ? "0"+num:num+"";
}
function daojishi(){
// 倒计时
// 获取当前的时间 nowtime
var nowtime = new Date();
console.log(nowtime);
// 获取18:00的时间对象 endtime
var endtime = new Date("2020-1-2 22:0:0");
console.log(endtime);
// 获取时间差 lefttime = endtime-nowtime
var lefttime = endtime - nowtime;
console.log(lefttime);
// 时间差为毫秒 转换成秒在计算
var lefttime01 = lefttime/1000;
console.log(lefttime01);
// 通过时间差计算出 时分秒 h m s
h = parseInt(lefttime/1000/3600);
console.log(h)
h = addZero(h);
m = parseInt((lefttime01-h*60*60)/60);
console.log(m);
m = addZero(m);
s = parseInt(lefttime01%3600%60);
console.log(s);
s = addZero(s);
// var h = Math.floor( lefttime01 / 3600)
// console.log( Math.floor( lefttime01 / 3600));
// 然后将 h m s 补零
// 显示在div中
var time = h + ":" + m + ":" + s;
div = document.getElementsByTagName('div')[0];
div.innerHTML = time;
}
daojishi();
setInterval(daojishi,1000)
div.className = "d1"
}
</script>
</body>
来源：CSDN
作者：BMW_princeMrwang
链接：https://blog.csdn.net/BMW_princeMrwang/article/details/103809558