关于JavaScript获取时间函数及实现倒计时

• JavaScript获取当前时间函数
• 获取时间函数
• 设置时间函数
• 日期的格式转化
• 小案例：倒计时
• 效果展示
• HTML代码
• JavaScript代码
• 获取时间戳的函数代码

JavaScript获取当前时间函数

var time=new Date()

获取时间函数

Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
特别地, getDay() 返回的周是(0~6)
getMonth() 返回的是(0~11)

同理,下面的set函数亦是如此:

特别地,setMonth(0)表示将日期设置为上个月的最后一天

设置时间函数

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。

日期的格式转化

toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

小案例：倒计时

在页面上出现一个倒计时

  1. 获取两个时间节点之间的时间差
    1-1. 准备两个时间节点
    1-2. 使用 timeDiff 方法获取两个时间节点之间的时间差
  2. 写一个定时器, 每间隔一秒钟执行一次
    2-1. 书写一个间隔定时器 setInterval()
    2-2. 哪些代码写在定时器里面
      每间隔一秒钟获取一次当前时间
      每间隔一秒钟计算一次时间差
      每间隔一秒钟写入页面一次
  3. 把得到的时间差写入页面里面
    3-1. 组装一个 html 格式的字符串
      <span>1天</span><span>1小时</span><span>1分钟</span><span>1秒钟</span>
    3-2. 获取页面中现在存在的 p 标签
    3-3. 把我组装好的字符串使用 innerHTML 属性写入到 p 标签内

效果展示

HTML代码

代码片.

<div class="box">
    <h3>距离明天放学还有 : </h3>
    <p class="time">
    </p>
  </div>

JavaScript代码

代码片.

 var time1 = new Date('2020-5-24 12:50:33')
    // var time2 = new Date()
    // 1-2. 获取时间差
    // var res = fn(time1)
    // console.log(res)

    // 3-2. 获取 p 标签
    var p = document.querySelector('div p')

    // 2-1. 书写一个定时器
    setInterval(function () {
      // 这里的代码才会每间隔一秒执行一次
      // 2-2. 获取时间差
      var res = fn(time1)

      // 3. 写入页面里面
      // 3-1. 每间隔一秒都要组装一次最新的字符串
      var str = '<span>' + res.day + '天</span><span>' + res.hours + '小时</span><span>' + res.minutes + '分钟</span><span>' + res.seconds + '秒钟</span>'
      // 3-2. 获取 p 元素, 因为不需要每间隔一秒都获取一次
      // 所以这段代码写在定时器外面
      // 3-3. 因为每间隔一秒都要覆盖式的写入一次
      // 要在这里把我们准备好的 str 写入 p 标签内容
      p.innerHTML = str
    }, 1000)

获取时间戳的函数代码

代码片.

function fn(time1){
    var a=new Date()
    b=Math.floor(Math.abs(a.getTime()-time1.getTime())/1000)//毫秒
    var day = Math.floor( b / (60 * 60 * 24) )//天
    var hours = Math.floor(b % (60 * 60 * 24) / (60 * 60) )//小时
    var minutes = Math.floor( b % (60 * 60) / 60 )//分钟
    var seconds = b % 60//秒
    var obj={}
    obj.day=day
    obj.hours = hours
    obj.minutes = minutes
    obj.seconds = seconds
    return obj
}