极速网站制作,网站流量不正常,诸暨有哪些制作网站公司,开发一个网站成本今天是第九天#xff0c;学习了JS中的设置日期和倒计时#xff0c;计时器以及验证码倒计时#xff0c;那么话不多说我们开始今天的学习吧
一、日期设置
1.1日期创建
调用 new Date() 来创建一个新的 Date 对象。在调用时可以带有一些参数#xff0c;创建一个 Date 对象学习了JS中的设置日期和倒计时计时器以及验证码倒计时那么话不多说我们开始今天的学习吧
一、日期设置
1.1日期创建
调用 new Date() 来创建一个新的 Date 对象。在调用时可以带有一些参数创建一个 Date 对象其时间等于 1970 年 1 月 1 日 UTC0 之后经过的毫秒数1/1000 秒。
传入的整数参数代表的是自 1970-01-01 00:00:00 以来经过的毫秒数该整数被称为 时间戳。
这是一种日期的轻量级数字表示形式。我们通常使用 new Date(timestamp) 通过时间戳来创建日期并可以使用 date.getTime() 将现有的 Date 对象转化为时间戳下文会讲到。
new Date(datestring)
如果只有一个参数并且是字符串那么它会被自动解析。该算法与 Date.parse 所使用的算法相同将在下文中进行介绍。
new Date(year, month, date, hours, minutes, seconds, ms)
使用当前时区中的给定组件创建日期。只有前两个参数是必须的。
year 应该是四位数。为了兼容性也接受 2 位数并将其视为 19xx例如 98 与 1998 相同但强烈建议始终使用 4 位数。month 计数从 0一月开始到 11十二月结束。date 是当月的具体某一天如果缺失则为默认值 1。如果 hours/minutes/seconds/ms 缺失则均为默认值 0。
1.2
访问日期组件
从 Date 对象中访问年、月等信息有多种方式
getFullYear()
获取年份4 位数
getMonth()
获取月份从 0 到 11。
getDate()
获取当月的具体日期从 1 到 31这个方法名称可能看起来有些令人疑惑。
getHours()getMinutes()getSeconds()getMilliseconds()
获取相应的时间组件。
不是 getYear()而是 getFullYear()
很多 JavaScript 引擎都实现了一个非标准化的方法 getYear()。不推荐使用这个方法。它有时候可能会返回 2 位的年份信息。永远不要使用它。要获取年份就使用 getFullYear()。
另外我们还可以获取一周中的第几天
getDay()
获取一周中的第几天从 0星期日到 6星期六。第一天始终是星期日在某些国家可能不是这样的习惯但是这不能被改变。
以上的所有方法返回的组件都是基于当地时区的。
当然也有与当地时区的 UTC 对应项它们会返回基于 UTC0 时区的日、月、年等getUTCFullYear()getUTCMonth()getUTCDay()。只需要在 get 之后插入 UTC 即可。
getTime()
返回日期的时间戳 —— 从 1970-1-1 00:00:00 UTC0 开始到现在所经过的毫秒数。
getTimezoneOffset()
返回 UTC 与本地时区之间的时差以分钟为单位。
下列方法可以设置日期/时间组件
setFullYear(year, [month], [date])setMonth(month, [date])setDate(date)setHours(hour, [min], [sec], [ms])setMinutes(min, [sec], [ms])setSeconds(sec, [ms])setMilliseconds(ms)setTime(milliseconds)使用自 1970-01-01 00:00:00 UTC0 以来的毫秒数来设置整个日期
以上方法除了 setTime() 都有 UTC 变体例如setUTCHours()。
我们可以看到有些方法可以一次性设置多个组件比如 setHours。未提及的组件不会被修改。
二、倒计时
可以使用 JavaScript 的计时器函数 setInterval() 来实现倒数计时器。
!DOCTYPE html
html
headtitle倒数计时器/title
/head
bodyh1 idcountdown/h1script// 倒数计时器总时间以秒为单位var totalSeconds 60;// 获取显示倒数计时器的元素var countdownElement document.getElementById(countdown);// 更新倒数计时器函数function updateCountdown() {// 计算剩余时间var minutes Math.floor(totalSeconds / 60);var seconds totalSeconds % 60;// 格式化时间字符串var timeString minutes.toString().padStart(2, 0) : seconds.toString().padStart(2, 0);// 更新显示倒数计时器的元素countdownElement.innerHTML 倒数计时器: timeString;// 减少剩余时间totalSeconds--;// 如果剩余时间小于等于 0则停止计时器if (totalSeconds 0) {clearInterval(countdownTimer);countdownElement.innerHTML 倒数计时器: 时间到;}}// 启动倒数计时器var countdownTimer setInterval(updateCountdown, 1000);/script
/body
/html
在这个例子中我们首先设置了倒数计时器总时间60 秒然后获取了一个 HTML 元素来显示计时器并创建了一个函数 updateCountdown() 来更新计时器的显示。
函数 updateCountdown() 首先计算剩余时间分钟和秒数然后格式化这些时间为一个字符串并更新显示计时器的元素。接着它减少剩余时间并检查是否需要停止计时器即剩余时间是否小于等于 0如果需要停止就清除计时器并更新显示计时器的元素。
最后我们使用 setInterval() 函数启动倒数计时器每秒钟调用一次 updateCountdown() 函数来更新计时器的显示。 三、定时器
script// 定时器// 每隔一段时间 重复执行一段代码// 一次性定时器 延时定时器//设置一次性定时器 定时器//setTimeout(function(){执行的代码}毫秒var n1 setTimeout(function(){alert(666)},2000)var n2 setTimeout(function(){alert(777)},3000)var n3 setTimeout(function(){alert(888)},4000)//关闭一次性定时器 clearTimeout(n2)// 重复性定时器 周期定时器// var timer setInterval(function(){执
// clearInterval(timer)var i 1;var timer setInterval(function(){ i;console.log(i) },1000)clearInterval(timer);/script
什么是定时器
JS提供了一些原生方法来实现延时去执行某一段代码
setTimeout
设置一个定时器在定时器到期后执行一次函数或代码段
setInterval:
以固定的时间间隔重复调用一个函数或者代码段
四、验证码倒计时
button idbut 5秒/button
scriptvar sec 5;//5秒倒计时var timer setInterval(function(){//秒数-1sec--;// 设置按钮里的文本内容but.innerHTML sec秒// 按钮 禁用but.disabled true;//当秒数小于0停止定时器if(sec 0){//停止定时器clearInterval(timer);//按钮的文字修改成获取验证码but.innerHTML 获取验证码//按钮取消禁用but.disabled false;}},1000)/script
验证码倒计时也是常用的一定要牢记哦。
今天的学习到此结束。
