JavaScript入门日期时间对象date/BOM Day09

闻鹤于野

已于 2022-10-10 17:56:45 修改

阅读量229

点赞数

分类专栏：二阶段文章标签： javascript 开发语言 ecmascript

于 2022-08-25 17:45:22 首次发布

本文链接：https://blog.csdn.net/qq_63354840/article/details/126517868

版权

二阶段专栏收录该内容

34 篇文章 0 订阅

订阅专栏

日期时间对象date

Date 日期时间对象类型名
作用：处理日期时间

创建对象

表示当前时间，以中国标准时间形式显示：

var date = new Date()  //构造函数方式
//var date可以称为：实例对象 对象名 引用变量
var date = new Date()
console.log(date)  //得到中国标准时间 Thu Aug 25 2022 9:31:30 GMT+0800

创建指定时间对象,时分秒不创建默认为00.00.00

var date = new Date(2021,10,1)  //年月日 时分秒
console.log(date)  //得到指定时间 Fri Oct 01 2022 00:00:00 GMT+0800
var date = new Date('2021-10-1') 
console.log(date)  //得到指定时间 Fri Oct 25 2022 00:00:00 GMT+0800

方法

var currentTime = new Date() 
var year = currentTime.getFullYear()  //年
console.log('year： ',year)
var month = currentTime.getMonth()  //月
console.log('month:',(month+1))  // 注: 计算机月从0开始，所以要+1 
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)

格式化时间

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}`
	}
}
 var currentTime = formateCurrentTime(1) //yyyy-mm-dd hh:MM:ss  yyyy年mm月dd hh时MM分ss秒
    document.write(currentTime)

计算时间差

    <!-- 
        格林威治时间:  计算机时间的元点 规则: 1970年1月1日（00:00:00 GMT）

         计算一下 2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差? 
            '2019-01-03 04:55:34' - '2019-01-01 00:00:00'  X
            1. 计算时间毫秒差值
            2. 换算: 秒->分->小时->天->年
     -->
 var time1 = new Date('2019-01-01 00:00:00')
        var time2 = new Date('2019-01-03 10:01:00')
        var time = time2.getTime() - time1.getTime() // getTime()获取毫秒

        // 换算-天  相差的总毫秒/ 1天的毫秒 = 相差的天数
        var day = time/(1000 * 60 * 60 * 24)
        day = Math.floor(day)
        console.log(day)

        // 相差的总毫秒 - day天的毫秒  差的小时 
        var hoursTime = time - day * (1000 * 60 * 60 * 24)
        var hours =  hoursTime/(1000 * 60 * 60)
        hours = Math.floor(hours)
        console.log(hours)

        // 相差的小时的总毫秒 - hours的毫秒  差的分钟
        var minutesTime = hoursTime - hours * (1000 * 60 * 60)
        var minutes = minutesTime/(1000 * 60)

        console.log(minutes)

BOM

JavaScript组成：

ECMASCRIPT JavaScript语法
BOM 浏览器对象模型
DOM 文档对象模型

BOM作用

操作浏览器的能力

windows对象浏览器窗口对象

系统创建window

window

属性和方法（window下的子对象）

history 子对象 ->历史记录对象
location 子对象 ->地址栏对象（位置对象）
document 子对象 ->文档对象 html文件重点学习（DOM）
navigation 包含浏览器相关信息
screen 用户显示屏幕相关信息

常用方法 (window都可以省略)

alert() 信息提示框，弹框 //window子对象

function fun(){
    window.alert('今天星期四')  //alert是window子对象，不用window也可以用
    alert('申鹤爱我')
} 
fun()

confirm() 信息确认框用变量接收，有返回值为Boolean ，多用于删除操作

function fun(){
    var isOK = confirm('申鹤喜欢我吗？')
    if(isOK){
        alert('申鹤喜欢我')      //确认出现 
    }else){
        alert('申鹤爱我')        //取消出现
    }
}
fun()

prompt( ) 输入框确定返回值，取消不返回值

function fun(){
    var score = window.prompt('请输入你的数学成绩')  //score为字符串类型
    var newScore = Number(score) + 10   //转为数字
    alert(newScore) //确认返回这个   取消返回null
}

open( )&close() 打开浏览器窗口 & 关闭浏览器窗口

window.open ('地址','窗口名','参数')
window.close

setTimeout() 倒计时定时器,到点出现

var timer = window.setTimeout(function(){  //window可以省略
        //    定时器执行代码
},1000)    //1000ms = 1s  ，1s后出现

clearTimeout(timer)  //清除定时器


function fun(){
    var timer = window.setTimeout(function(){  //window可以省略
       console.log('申鹤爱我')
    },1000)   //1s 后出现
}
function fun()

setInterval() 循环定时器

function fun(){
var n = 5
    var timer = window.setInterVal(function(){  //window可以省略
       console.log(n--)
        if(n == 0){
            clearInterVal(timer) //结束循环
        }
    },1000)   //1s 后出现 1s后出现 循环....
}
function fun()

浏览器窗口尺寸 innerHeight高 & innnerWidth宽

 <body><button onclick="getSize()">获取尺寸</button></body>
function getSize(){
            var h = window.innerHeight // 高 基于浏览器第一屏
            var w = window.innerWidth  // 宽
            document.write( `height: ${h},  width: ${w}` )
        }

滚动事件属性 window.onscroll

getScollTop( )获取页面向上滚动的距离

document.documentElement.scrollTop()
document.body.scrollTop() //兼容IE用这个

<body>
    <h2>滚动事件属性</h2>
    <button onclick="setTop(200)">设置100位置</button>
    <div></div>
</body>
// 浏览器滚动条滚动时执行函数代码
        window.onscroll = function(){
            var scrollTop = getScollTop()  //页面向上滚动的距离，获取距离浏览器顶部的距离
            console.log(scrollTop)
        }
        function getScollTop(){
            // 逻辑或， 前面有值(true) 直接返回，否则返回后面的值  
            return document.documentElement.scrollTop || document.body.scrollTop
                    //
        }
        function setTop(top){
            document.documentElement.scrollTop = top
        }

练习：返回顶部

		<style>
			* {
				padding: 0;
				margin: 0;
			}
			div {
				background-color: skyblue;
				height: 1200px;
			}
			div img {
				max-width: 100%;
			}
			button {
				position: fixed;
				bottom: 20px;
				right: 30px;
			}
		</style>
<body>
		<div>
			<img src="./image/jingdong.jpg" alt="" />
		</div>
		<button onclick="backTop()">回到顶部</button>
</body>
			function backTop() {
				var timer = setInterval(function () {
					var height = document.documentElement.scrollTop 
					document.documentElement.scrollTop = height - 150 
                    if(height <= 0){
                        clearInterval(timer)
                    }
				}, 100)

			}