日期时间对象Date
注意：计算机算月份从0开始
=>1. 作用: 处理日期时间
=>2. Date 日期类型
=>3. 创建对象:
=> 当前时间
var date = new Date() // 构造函数方式
实例对象 对象名 引用变量
以中国标准时间形式显示
=> 创建指定时间的对象
var date = new Date(2021,10,1)
var date = new Date('2021-10-1')
=>4. 方法
当前时间
var date = new Date()
console.log(date)
=>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
<script>
function test1(){
var date = new Date()
console.log(date) // Thu Aug 25 2022 09:30:30 GMT+0800 (中国标准时间)
}
function test2(){
var date = new Date(2021,10,1,10,10,01)
console.log(date)
}
// test2()
function test3(){
var date = new Date('2021-10-1 13:10:01')
console.log(date)
}
// test3()
function test4(){
var currentTime = new Date()
var year = currentTime.getFullYear()
console.log('year： ',year)
var month = currentTime.getMonth()
console.log('month:',(month+1)) // 注: 计算机月从0开始
var hours = currentTime.getHours()
console.log('hours :', hours)
var minutes = currentTime.getMinutes()
console.log('minutes :',minutes);
var seconds = currentTime.getSeconds()
console.log('seconds :',seconds)
var day = currentTime.getDay() //星期
console.log('day :',day)
var time = currentTime.getTime()
console.log('time ',time) // 1661391820493 1秒 = 1000毫秒 1分钟= 60秒 1小时=60分钟 1天=24小时
}
// test4()
</script>格式化日期时间
格式化当前日期时间
function formateCurrentTime(type) {
var time = new Date() // Thu Aug 25 2022 09:48:16 GMT+0800 (中国标准时间)
var year = time.getFullYear()
var month = time.getMonth()
var date = time.getDate()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
switch (type) {
case 0:
return `${year}年${month}月${date} ${hours}时${minutes}分${seconds}秒`
case 1:
return `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`
case 2:
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
default:
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
}
}实例 计算用户输入日期时间到当前时间相差的时间
// 计算输入日期时间到当前日期时间的时间差
function dateAndTime() {
var tt = prompt("请输入时间：格式为'yyyy-mm-dd hh:MM:ss'")
var time1 = new Date(tt);
var time2 = new Date()
var time = time2.getTime() - time1.getTime()
//相差的天数
var day = time / (1000 * 60 * 60 * 24)
day = Math.floor(day)
// console.log('相差'+day+"天");
// 相差的小时数
var hoursTime = time - day * (1000 * 60 * 60 * 24)
var hours = hoursTime / (1000 * 60 * 60)
hours = Math.floor(hours)
// console.log(hours+'小时');
// 相差的分钟数
var minutesTime = hoursTime - hours * (1000 * 60 * 60)
var minutes = minutesTime / (1000 * 60)
minutes = Math.floor(minutes)
// console.log(minutes+'分钟');
// 相差的秒数
var secondsTime = minutesTime - minutes * (60 * 1000)
var seconds = secondsTime / (1000)
seconds = Math.floor(seconds)
// console.log(seconds+'秒');
console.log(`两个时间相差${day}天${hours}小时${minutes}分钟${seconds}秒`);
}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)
<script>
function test1(){
// window.alert('今天是周四!')
// alert('今天不是周五!')
var isOk = confirm('确定要删除改记录吗?')
if(isOk){
alert('删除成功')
}else{
alert('取消删除')
}
}
// test1()
function test2(){
var score = prompt('请输入你的数学成绩!')
var newScore = score - 10 //隐式类型转换
alert(newScore)
}
// test2()
function test3(){
window.open('http://www.baidu.com','百度','')
}
// test3()
function test4(){
var timer = setTimeout(function(){
console.log('今天天气降温了!');
},2000)
}
// test4()
function test5(){
var n = 5
var timer = setInterval(function(){
if(n == 0){
clearInterval(timer) //结束定时器
}
console.log(n--)
},1000)
}
test5()
</script>history历史记录对象
history
作用: 操作历史记录
创建对象:
window.history
方法
back() 后退
forward() 前进
go(-1) go(1)
location位置对象
位置对象，地址栏对象
刷新 url地址栏输入框
window.location
方法和属性
href属性
location.href
=> 获取当前页面url地址
=> 设置url -> 跳转url地址对应页面
方法
reload() 刷新界面
窗口尺寸
浏览器窗口尺寸
innerHeight
innnerWidth
<button onclick="getSize()">获取尺寸</button>
<script>
function getSize(){
var h = window.innerHeight // 高
var w = window.innerWidth // 宽
document.write( `height: ${h}, width: ${w}` )
}
console.log('我下班了,蟹老板 。我要说的是:如果有一天我真的实现我生命中的梦想,我永远也不会让我的双脚站在这油污的地板上');
</script>滚动事件属性
浏览器滚动条滚动时执行函数代码
<h2>滚动事件属性</h2>
<button onclick="setTop(200)">设置100位置</button>
<div></div>
<script>
// 浏览器滚动条滚动时执行函数代码
window.onscroll = function(){
// console.log('scrollTop :', document.documentElement.scrollTop )
// console.log('body ',document.body.scrollTop);
var scrollTop = getScollTop()
console.log(scrollTop)
}
function getScollTop(){
// 逻辑或， 前面有值(true) 直接返回，否则返回后面的值
return document.documentElement.scrollTop || document.body.scrollTop
}
function setTop(top){
document.documentElement.scrollTop = top
}
</script>记得添加大于一屏的浏览器高度
实例 回到顶部按钮
<style>
*{
padding: 0;
margin: 0;
}
div{
height: 2000px;
background-color: aqua;
}
button{
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: rgb(146, 47, 212);
}
</style><div></div>
<button onclick="backTop()">
糊掉顶部
</button>
<script>
function backTop(){
var timer = setInterval(function(){
var height = document.documentElement.scrollTop
document.documentElement.scrollTop=height-150
if(height<=0){
clearInterval(timer)
}
},100)
}
</script>
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
