Javascript学习（三）

Javascript学习（三）

Math 对象

Math对象里的所有属性都是常量，不能被改变

console.log(Math.PI) //圆周率
Math.PI = 3.14
 console.log(Math.PI)
 console.log(Math.abs(-32)) //绝对值
 console.log(Math.sin(Math.PI / 6)) // 三角函数参数传递弧度而不是角度， 2PI === 360°
 console.log(Math.ceil(3.1)) // 向上取整
 console.log(Math.ceil(-3.1)) 
 console.log(Math.floor(3.9)) // 向下取整
 console.log(Math.floor(-3.9)) 
 console.log(Math.round(-3.9)) // 四舍五入

 console.log(Math.max(5,3,6,3,64,3)) // 最大值
 console.log(Math.min(5,3,6,3,64,3)) // 最小值

console.log(Math.pow(2,3)) // 次方
console.log(Math.sqrt(64)) // 幂

console.log(Math.floor(Math.random() * 10)) // 0-9
console.log(Math.ceil(Math.random() * 10)) // 1-10
// 20-50，包含20但不包含50
console.log(Math.floor(Math.random() * 30) + 20)
// 产生随机数的公式：Math.random()*(max - min) + min
// 但是公式里取整方向需要根据区间来决定（如果要包含小的那个数就要向下，包含大的就向上）
// 如果两个都要包含，Math.random()*(max - min + 1) + min，向下取整

Date 日期

get

var date = new Date()
console.log(date) // 当前日期对象
// console.log(date.getYear()) // 现在已经不适用了
console.log(date.getFullYear())
console.log(date.getMonth()) // 0-11对应1-12月
console.log(date.getDate())
console.log(date.getDay()) // 0-6代表星期天到星期六

console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log(date.getMilliseconds()) // 毫秒  1000毫秒 == 1秒

console.log(date.getTime()) // 时间戳：从1970年1月1号凌晨0点到现在总的毫秒数
console.log(Date.now())

var date1 = new Date(2000, 1, 1) // 2000年2月1号
// var date1 = new Date(2000, 1, 1, 15, 15, 15) // 2000年2月1号15:15:15
console.log(date1)

set

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

// date.setFullYear(2010)
date.setFullYear(2010, 1, 1) // 设置年的时候可以同时设置月和日
console.log(date)
// date.setMonth(4, 1) // 设置月的时候也可以同时设置日
// 年月日时分秒都可以设置 setDay是没有的，星期几是自动推算的不能设置

// 如果设置的日期或者事件超出正常范围，date会帮我们自动前后推算
date.setMonth(1, 30)

// 获取某个月总共有多少天可以把日期设置成下个月的0号，也就是这个月的最后一天，getDate就行了
date.setMonth(date.getMonth() + 1, 0)
console.log(date.getDate()) // 31
console.log(date)

通过Date实现倒计时

setInterval(function () {
      console.log("这段代码会每隔一秒执行一次")
      var nowTime = Date.now()
      var date = new Date(2021, 1, 6, 18, 0, 0)
      var distance = Math.floor((date.getTime() - nowTime) / 1000)
      console.log(distance)

      var seconds = distance % 60
      distance -= seconds // 除去零散秒数之外的剩下整的分钟数的秒
      var minutes = distance / 60 % 60
      distance -= minutes * 60
      var hours = distance / 3600 % 24
      distance -= hours * 3600
      var days = distance / 3600 / 24
      document.getElementById('title').innerHTML = '距离放假还有' + days + '天' + hours + '：' + minutes + '：' + seconds
    }, 1000)

window

window下的属性以及方法都是全局的

location

http:// 127.0.0.1 :5500 /day09-BOM-DOM/01-window.html? id=32 #top
http: // ：协议
127.0.0.1：主机名
:5500： 端口
/day09-BOM-DOM/01-window.html?： 路径
id=32： 搜索参数
#top：hash值

页面跳转

     location.href = 'http://www.xiongdalin.com'
     location.replace('http://www.xiongdalin.com')
     window.open('http://www.xiongdalin.com', '_self')

navigator

可以通过navigator.userAgent来获取浏览器类型。

window 事件

onLoad()
onSize()
onScroll()

// var box = document.getElementById('box')
    // console.log(box)  //页面未加载完成，不能执行，想要执行，将js写在div后面
    window.onload = function () {
      // 这里的代码是在页面加载完成之后执行
      var box2 = document.getElementById('box')
      console.log(box2,1)
    }

    window.onscroll = function () {
      // 滚轮事件触发的时候页面已经加载好了，所以这里也能获取元素
      // var box2 = document.getElementById('box')
      // console.log(box2)
      // 兼容IE，逻辑短路，第一部分有效就直接使用第一部分，无效就使用第二部分
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
    }

    window.onresize = function () {
      // 窗口大小改变事件
      console.log(window.innerWidth, window.innerHeight)
    }