js第九天

最新推荐文章于 2024-11-03 16:40:52 发布

小AL

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量454

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_61884985/article/details/126517929

版权

五、window属性和方法使用（window子对象）

（1）history 提供操作历史记录的能力

(2)location 地址栏对象，位置对象

(3) window 对象

总结

前言

今天学习的是javascript中的Data对象，以及Javascript三大组成部分中的BOM游览器对象模型部分，学习这两部分还是按照之前的步骤，从它是做什么的，有什么功能、创建方式、属性以及方法几个方面来学习。

一、Date 对象

Date：日期时间对象

1.作用：处理日期对象

2.创建对象：

var date = new Date() //构造函数方式

实例对象对象名引用变量

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

创建指定时间的对象：

var data = new Data(2021,10,01) 或者

var data = new Data('2021-10-01)

js常用处理时间日期库 http://momentjs.cn/

3.Data方法

1.getFullYear 获取指定字符串中的年份

代码如下（示例）：

<script>
        var currentTime = new Data()    //获取当前时间      
        var year = currentTime.getFullYear()    //获取当前时间的年份    
        console.log(year)                       //控制台输出当前年份

</script>

2.getMonth 获取指定字符串中的月份（注意：计算机中的月份是从0开始）

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var month = currentTime.getMonth()         //获取当前时间的月份 
     console.log(month)                        //控制台输出当前月份

</script>

3.getHours 获取指定字符串中的小时

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var hours = currentTime.getHours()         //获取当前时间的小时数 
     console.log(hours)                        //控制台输出当前小时数

</script>

4.getData 获取指定字符串中的哪一天

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var data = currentTime.getData()         //获取当前时间的几号 
     console.log(data)                        //控制台输出当前几号

</script>

5.getDay 获取指定字符串中当前日期中一周中的哪一天（周日是0，周六是6）

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var day = currentTime.getDay()         //获取当前时间的星期数 
     console.log(day)                        //控制台输出当前星期几（周日是0，周六是6）

</script>

6.getMinutes 获取指定字符串中的哪一分钟

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var minutes = currentTime.getMinutes()         //获取当前时间的分钟数
     console.log(minutes)                        //控制台输出当前分钟

</script>

7.getSeconds 获取指定字符串中的哪一秒钟

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var seconds = currentTime.getSeconds()         //获取当前时间的秒钟数 
     console.log(seconds)                        //控制台输出当前秒钟数

</script>

8.getTime 获取指定字符串中的哪一毫秒

代码如下（示例）：

<script>
     var currentTime = new Data()                 //获取当前时间                        
     var time = currentTime.getTime()         //获取当前时间的毫秒数
     console.log(time)                        //控制台输出当前时间的毫秒数

</script>

4.Data案例

（1）格式化时间

Thu Aug 25 2022 09：30：30 GMT+0800（中国标准时间形式）

===》2022年8月27日 10时：7分：54秒

===》2022/8/27 10：7：54

===》2022-8-27 10：7：54

代码如下（示例）：

  <script>
        function formateCurrentTime(type) {
            var currentTime = new Date() //获取时间
            var year = currentTime.getFullYear() //获取年份
            var month = currentTime.getMonth() //获取月份
            var date = currentTime.getDate() //获取日期
            var hours = currentTime.getHours() //获取小时
            var minutes = currentTime.getMinutes() //获取分钟
            var second = currentTime.getSeconds() //获取秒钟

            switch (type) {
                case 1:
                    return `${year}年${month}月${date}日 ${hours}时${minutes}分${second}秒`    //如果formateCurrentTime函数实参为1，输出输出2022年7月27日 10时7分54秒
                case 2:
                    return `${year}/${month}/${date} ${hours}:${minutes}:${second}`        //如果formateCurrentTime函数实参为1，输出2022/8/27日 10：7：54
                case 1:
                    return `${year}-${month}-${date} ${hours}:${minutes}:${second}`        //如果formateCurrentTime函数实参为1，输出 2022-8-27  10：7：54
                default:
                    return `${year}-${month}-${date} ${hours}:${minutes}:${second}`        //如果formateCurrentTime函数实参为其他值，输出 2022-8-27  10：7：30

            }
        }
        var timeStr = formateCurrentTime(1)   //调用formateCurrentTime函数
        document.write(timeStr)     //输出2022年7月27日 10时7分54秒
    </script>

（2）计算时间差

我们现在计算一下 2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差

①先获取两个时间点到格林威治时间(1970年1月1日（00:00:00 GMT）) 的毫秒数

②两个时间相减，得到两个时间点之间相差的毫秒数

③毫秒转换成天

④把我们计算的毫秒数换算成时间

代码如下（示例）：

 <script>
        /*
        2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差
                  1计算两个时间的毫秒差值
                  2.换算：毫秒 ===》秒/分/时/天/年
        */

        function timeDifference(){
            var time1=new Date('2019-01-01 00:00:00')
            var time2=new Date('2019-01-03 04:55:34')
            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 secondTime=minutesTime- minutes*(1000*60)
            var second=secondTime / 1000
            console.log(second)     //控制台输出相差的秒钟数


            console.log(`2019-01-01 00:00:00 到 2019-01-03 04:55:34相差了${day}天${hours}时${minutes}分${second}秒`) //用模板字符串输出两个时间相差的天/时/分/秒
        }
        timeDifference()
    </script>

二、BOM 游览器对象模型

1.作用：提供操作游览器的能力

使用：window 对象称为游览器窗口对象

2.创建对象：系统创建window

3.子对象

①history 历史记录对象

②location 地址栏对象（位置对象）

③document 文档对象 HTML文档 (重点）

④navigator 包含游览器相关信息

⑤screen 用户显示屏幕相关属性

4.常用方法

（1）alert() 信息提示框，带一个提示信息与一个确定按钮

代码如下（示例）：

 <script>
        window.alert('今天是周四')

        //alert('今天是周四')  使用window根对象属性或方法时，window对象可以省略
    </script>

运行结果如下：

（2）confirm() 信息提示框，带提示信息，确定按钮和取消按钮（在项目中，多用于删除信息确定）

代码如下（示例）：

  
<script>
        
        function textConfirm(){
            var isOK=confirm('确定删除记录吗？')
            if(isOK){
                window.alert('删除成功')
            }else{
                window.alert('取消删除')
            }
        }
        textConfirm()
    </script>

运行结果如下：

（3）prompt() 信息输入框

代码如下（示例）：

  
<script>
        function testPrompt(){
            var score=prompt('请输入你的成绩')   //输出类型为String
             // score=Number(score)         //要做加运算，要先把输入转为数字类型
            var newScore=score+10      //当为做 - 运算时，正常输出80，隐式类型转换
            alert(newScore)        //当输入成绩为90，输出9010
        }
        testPrompt()
    </script>

运行结果如下：

（4）close() 关闭游览器窗口

（5）open() 打开游览器窗口

语法：open(url,窗口名称,参数)

代码如下（示例）：

<script>
        function testOpen(){
            window.open('https://music.163.com/','网易云音乐','')
        }
        testOpen()
    </script>

(6) setTimeout 倒计时定时器

代码如下（示例）：

<script>
          var timer=window.setTimeout(function(){       //启动倒计时定时器
            alert('今天天气降温了!')
            },2000)                          //2000为时间参数,单位为毫秒
            
        // clearTimeout(timer)       //清除定时器

    </script>

（7)setInterval() 循环定时器

代码如下（示例）：

<script>
          function textSetInterval(){
            var n=6
            var timer=window.setInterval(function(){
                if(n == 0){
                    clearTimeout(timer)    //清除定时器
                }
                alert('啦啦啦~~')
                n--
            },2000)      //循环执行
        }
        textSetInterval()
    </script>

五、window属性和方法使用（window子对象）

（1）history 提供操作历史记录的能力

1.创建对象 window.history (直接使用)

2.方法

①back() 加载history对象列表中的前一个url(后退）

②forward() 加载history对象列表中的下一个url(前进）

③go() 加载history对象列表中的任何一个url(正数代表前进，负数代表后退）

history.back() 等价于 history.go(-1)

history.forwrad() 等价于 history.go(1)

(2)location 地址栏对象，位置对象

1.常用属性

location.href 作用：①获取当前页面url地址 ②设置跳转到对应页面

代码如下（示例）：

    <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 = 'https://music.163.com/'   //设置地址
         }
         
    </script>

2.方法

reload 刷新页面

语法：loaction.reload()

(3) window 对象

1.获取游览器窗口尺寸

window.innerHeight //获取高度

window.innerWidth //获取宽度

2.游览器onscroll事件

window.οnscrοll=function(){ //游览器滚动条滚动时执行代码

//执行代码

}

3.游览器滚动的距离 scrollTop (获取页面向上滚动的距离）

scrollTop (获取页面向上滚动的距离）有两种方式：

①document.body.scrollTop

②document.documentElemment.scrollTop

代码如下（示例）：

<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>

示例2：慢慢回到顶部，每次上升150px

代码如下（示例）：

<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>

		<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>