1、日期时间对象Date
日期时间对象date
=>1. 作用: 处理日期时间
=>2. Date 日期类型
=>3. 创建对象:
=> 当前时间
var date = new Date() // 构造函数方式
实例对象 对象名 引用变量
以中国标准时间形式显示
=> 创建指定时间的对象
var date = new Date(2021,10,1)
var date = new Date('2021-10-1')
=>4. 方法
=>5.示例
1. 格式化时期时间
Thu Aug 25 2022 09:30:30 GMT+0800 (中国标准时间)
-> 2022年8月25日 09时:30分:30秒
-> 2022/8/25 09:30:30
-> 2022-8-25 09:30:30
常用方法
计算时间差
格林威治时间: 计算机时间的元点 规则: 1970年1月1日（00:00:00 GMT）
求你出生到现在经历多少天多少小时?
1. 计算时间毫秒差值
2. 换算: 秒->分->小时->天->年
function getDifferenceTime(){
var time1=new Date('1999-02-26 14:00:30')
var time2=new Date('2022-08-25 11:00:00')
// 先获取两个时间点到 格林威治时间(1970年1月1日（00:00:00 GMT）) 的毫秒数
time1=time1.getTime()
time2=time2.getTime()
// 两个时间相减，得到两个时间点之间相差的毫秒数
var diffrenceTime=time2-time1
//计算整的天数
var day=diffrenceTime/(1000*60*60*24)
day=Math.floor(day)
//计算整的小时数
var afterHours=diffrenceTime-day*1000*60*60*24
var hours=afterHours/(1000*60*60)
hours=Math.floor(hours)
// 计算整的分钟数
var afterMinutes=afterHours-hours*1000*60*60
var minutes=afterMinutes/(1000*60)
minutes=Math.floor(minutes)
// 计算整秒数
var afterSeconds=afterMinutes-minutes*1000*60
var seconds=afterSeconds/1000
seconds=Math.floor(seconds)
return day+'天'+hours+'时'+minutes+'分'+seconds+'秒'
}
document.write('2022-08-25 11:16:30'+'和'+'2022-08-25 14:00:30'+'相差 '+getDifferenceTime())？
2、Bom
javascript三部份组成
ECMASCRIPT javascript语法
BOM 浏览器对象模型
DOM 文档对象模型
BOM
作用: 操作浏览器的能力
window对象 浏览器窗口对象
=> 系统创建window
window
=> 属性和方法
子对象
history 子对象-> 历史记录对象
location 子对象 -> 地址栏对象 (位置对象)
document 子对象 -> 文档对象 html文档 重点学习
navigator，包含浏览器相关信息
screen 用户显示屏幕相关属性
常用方法
alert() 信息提示框
confirm() 信息确认框
prompt() 信息输入框
window.alert()
=>使用window根对象属性或方法时，window对象可以省略
open() 打开浏览器窗口
window.open(URL, 窗口名称, 参数);
window.close()
setTimeout() 倒计时定时器
setInterval() 循环定时器
语法:
// 启动倒计时定时器
var timer = window.setTimeout(function(){
//定时器执行的代码
},1000)
clearTimeout(timer) // 清除定时器
// 启动循环定时器
var timer = window.setInterval(function(){
//执行代码
},1000)
clearInterval(timer)
示例
function test1(){
window.alert('今天周六吗?')
alert('今天周六') //使用window根对象属性或方法时，window对象可以省略
var isOk=confirm('确定要删除记录吗？')
if(isOk){
alert('删除成功')
}else{
alert('取消删除')
}
var score=prompt('请输入你的数学成绩')
score=Number(score)+10 // 输入类型会表现为字符串，+直接拼接，需转类型
score=score-10 //隐式类型转换
alert(score)
window.open('http://www.baidu.com','百度','')
var timer=setTimeout(function(){
document.write('今天降温')
},2000) //2000单位为毫秒，即2秒
//倒计时
var divEle=document.querySelector('div')
var n=5
var timer=setInterval(function(){
if(n==0){
clearInterval(timer) //结束定时器
}
divEle.innerHTML=n--
},1000)
}
test1()
3、history历史记录对象
history
作用: 操作历史记录
创建对象:
window.history
方法
back() 后退
forward() 前进
go(-1) go(1)
index.html
<h2>首页</h2>
<a href="./detail.html">详情页</a>
<button onclick="history.forward()">前进</button>
detail.html
<h2>详情页</h2>
<button onclick="goBack()">后退</button>
<script>
function goBack(){
history.back()
}
</script>
4、location
<!-- location
位置对象，地址栏对象
刷新 url地址栏输入框
window.location
方法和属性
href属性
location.href
=> 获取当前页面url地址
=> 设置url -> 跳转url地址对应页面
方法
reload() 刷新界面 -->
示例
<button onclick="getUrl()">获取当前页面url地址</button>
<button onclick="setUrl()">设置url</button>
<button onclick="location.reload()">刷新</button>
<script>
function getUrl(){
var url = location.href //获取当前url地址
document.write(url)
}
function setUrl(){
location.href = 'http://www.baidu.com'
}
</script>
location 属性
5、浏览器窗口尺寸
/* 浏览器窗口尺寸
innerHeight
innnerWidth */
var h=innerHeight //浏览器高度
var w=innerWidth //浏览器宽度
document.write(`height:${h},width:${w}`)
6、滚动事件属性
// 浏览器滚动条滚动时执行函数代码
window.onscroll = function(){
console.log('scrollTop :', document.documentElement.scrollTop )
console.log('body ',document.body.scrollTop);
}
7、回到顶部
// 以150px/0.1s的速度慢慢回到顶部
function backTop(){
var timer=setInterval(function(){
var height=document.documentElement.scrollTop
document.documentElement.scrollTop=height-150
if(hegith<=0){
clearInterval(timer) //结束定时器
}
},100)
}
