日期时间对象，从出生到现在经历多少天？BOM相关知识，窗口对象及相关应用

本文链接：https://blog.csdn.net/qq_63322025/article/details/126517833

日期时间对象Date

作用：处理日期时间

创建对象：var date=new Date() //构造函数方式

实例对象对象名引用变量

Date 日期时间对象类型名

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

 var date=new Date()
        console.log(date)

打印输出：

创建一个指定时间对象，可以有两种方式，逗号分割，或者以字符串的方式表现

方法一：
        function test2(){
            var date=new Date(2021,10,1)
            console.log(date)
        }
        test2()


方式二：  function test2(){
            var date=new Date('2021-10-1 13:43:30')
            console.log(date)
        }
        test2()

打印输出：

方法：.get****( )

        function test4(){
            var currenTime=new Date()
            var year=currenTime.getFullYear()//年
            console.log('year:',year)

            var month=currenTime.getMonth()//月  默认从0开始
            console.log('mouth:',month)

            var date=currenTime.getDate()//星期几  
            console.log('Date:',date)

            var hours =currenTime.getHours()//小时  
            console.log('hours:',hours)

            var minutes=currenTime.getMinutes()//分钟 
            console.log('minutes:',minutes)

            var seconds=currenTime.getSeconds()//秒钟  
            console.log('seconds:',seconds)

            var time=currenTime.getTime()//毫秒
            console.log('time:',time)
        }
        test4()

例:格式化时间如何显示，为加强代码的通用性，我们使用switch语句进行传参。现实多个时间格式化。

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)

例：写一个时间差（1秒=1000毫秒）

<script>
        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() // 毫秒差

        // 换算-天  相差的总毫秒/ 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)

    </script>

练习：算一算距离你出生到现在共经历了多少年，月，日，时，分，秒？这里我分别用两种方式实现。


        var time1 = new Date()
        var time2 = new Date(1999, 02, 17)
        function getDiff(time1, tim2) {
            var ms1 = time1.getTime()
            var ms2 = time2.getTime()
            var sub = Math.floor((ms1 - ms2) / 1000)   //秒
            var minutes =Math.floor( sub / 60 )    //分
            var hours = Math.floor(minutes / 60)
            var day =Math.floor(hours / 24) 
            var month =Math.floor(day / 30) 
            var year = Math.floor(month / 12)
            return { '年': year, '月': month, '天': day, '小时': hours, '分钟': minutes }
        }
        var res = getDiff(time1, time2)
        console.log(res)

    //一秒等于1000毫秒
        var date2 = new Date()  //获得当前时间
        var date1 = new Date(1999, 02, 17)   //获得出生时间

        function getDiff(date1, date2) {   //定义一个变量接受两个数据
            var ms1 = date1.getTime()    //获得出生时间的毫秒
            var ms2 = date2.getTime()    //获得当前时间的毫秒

            var sub = Math.ceil((ms2 - ms1) / 1000)   //当前毫秒-出生的毫秒 /1000得到秒

            var day = Math.floor(sub / (60 * 60 * 24))    //得到相差的天并向下取整 

            var hours = Math.floor(sub % (60 * 60 * 24) / (60 * 60))   //得到相差的小时并向下取整 

            var minutes = Math.floor(sub % (60 * 60) / 60)     //得到相差的分钟并向下取整 
            var seconds = sub % 60                          //得到相差的秒钟

            return { '天': day, '小时': hours, '分钟': minutes, '秒钟': seconds }    //返回时间
        }
         var res=getDiff(date1,date2)
         console.log(res)

BOM

javascript三部份组成

ECMASCRIPT javascript语法

BOM 浏览器对象模型

DOM 文档对象模型

BOM

作用: 操作浏览器的能力

window对象浏览器窗口对象

=> 系统创建window

window

=> 属性和方法

子对象

history 子对象-> 历史记录对象

location 子对象 -> 地址栏对象 (位置对象)

document 子对象 -> 文档对象 html文档重点学习

navigator，包含浏览器相关信息

screen 用户显示屏幕相关属性

常用方法

alert() 信息提示框

confirm() 信息确认框

  function test1(){
            // window.alert('今天是周四!')
            // alert('今天不是周五!')

            var isOk = confirm('确定要删除改记录吗?')
            if(isOk){
                alert('删除成功')
            }else{
                alert('取消删除')
            }
        }
        // test1()

prompt() 信息输入框

function test2(){
            var score = prompt('请输入你的数学成绩!')
            var newScore = score - 10  //隐式类型转换
            alert(newScore)
        }
        // test2()

window.alert()

=>使用window根对象属性或方法时，window对象可以省略

open() 打开浏览器窗口

window.open(URL, 窗口名称, 参数);

        function test3(){
            window.open('http://www.baidu.com','百度','')
        }
        // test3()

window.close()

setTimeout() 倒计时定时器

      function test4(){
            var timer = setTimeout(function(){
                console.log('今天天气降温了!');
            },2000)
        }
        // test4()

setInterval() 循环定时器

语法:

// 启动倒时器定时器

var timer = window.setTimeout(function(){

//定时器执行的代码

},1000)

clearTimeout(timer) // 清除定时器

var timer = window.setInterval(function(){

//执行代码

},1000)

clearInterval(timer)

     function test5(){
            var n = 5
            var timer = setInterval(function(){
                if(n == 0){
                     clearInterval(timer) //结束定时器
                 }
                 console.log(n--)
                
            },1000)
        }

        test5()

history

作用: 操作历史记录

创建对象:

window.history

方法

back() 后退

forward() 前进

go(-1) go(1)

窗口大小尺寸

var windowHeight=window.innerHeight

console.log(windowHeight)

var windowWidth=window.innerWidth

console.log(windowWidth)

如果想做的美观一些，可以定义一个按钮来实现：

 <button onclick="getSize()">获取尺寸</button>
<script>   
function getSize(){
            var h = window.innerHeight // 高
            var w = window.innerWidth  // 宽
            document.write( `height: ${h},  width: ${w}` )
        }
</script>

从页脚跳转以页面顶部如何实现？

		<style>
			* {
				padding: 0;
				margin: 0;
			}
			div {
				background-color: skyblue;
				height: 1200px;
			}
			div img {
				max-width: 100%;
			}
			button {
				position: fixed;
				bottom: 20px;
				right: 30px;
			}
		</style>
	</head>
	<body>
		<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>
	</body>
</html>

滚动事件案例：

<style>
        div{
            height: 1200px;
        }
    </style>
</head>
<body>
    <h2>滚动事件属性</h2>
    <button onclick="setTop(300)">设置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>

若有错误，请指正！