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

关于JavaScript获取时间函数及实现倒计时关于JavaScript获取时间函数及实现倒计时JavaScript获取当前时间函数获取时间函数设置时间函数日期的格式转化小案例:倒计时效果展示HTML代码JavaScript代码获取时间戳的函数代码JavaScript获取当前时间函数vartime=newDate()获取时间函数Date()返回当日的日期和时间。getDate()从Date对象返回一个月中的某一天(1~31)。getDay()从Date对象返回一周中的某一天(0~6)。getMonth()从

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
}

PS:如果想获取更多的知识视频,加QQ好友10398975免费送给大家_

今天的文章关于JavaScript获取时间函数及实现倒计时分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9219.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注