JS第九天

今天是第九天,学习了JS中的设置日期和倒计时,计时器以及验证码倒计时,那么话不多说我们开始今天的学习吧

一、日期设置

1.1日期创建

调用 new Date() 来创建一个新的 Date 对象。在调用时可以带有一些参数,创建一个 Date 对象,其时间等于 1970 年 1 月 1 日 UTC+0 之后经过的毫秒数(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,例如 981998 相同,但强烈建议始终使用 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 对应项,它们会返回基于 UTC+0 时区的日、月、年等:getUTCFullYear()getUTCMonth()getUTCDay()。只需要在 "get" 之后插入 "UTC" 即可。

getTime()

返回日期的时间戳 ------ 从 1970-1-1 00:00:00 UTC+0 开始到现在所经过的毫秒数。

getTimezoneOffset()

返回 UTC 与本地时区之间的时差,以分钟为单位。

下列方法可以设置日期/时间组件:

以上方法除了 setTime() 都有 UTC 变体,例如:setUTCHours()

我们可以看到,有些方法可以一次性设置多个组件,比如 setHours。未提及的组件不会被修改。

二、倒计时

可以使用 JavaScript 的计时器函数 setInterval() 来实现倒数计时器。

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
	<title>倒数计时器</title>
</head>
<body>
	<h1 id="countdown"></h1>
	<script>
		// 倒数计时器总时间(以秒为单位)
		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() 函数来更新计时器的显示。

三、定时器

javascript 复制代码
<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:

以固定的时间间隔重复调用一个函数或者代码段

四、验证码倒计时

javascript 复制代码
<button id="but" >5秒</button>
<script>
    var sec =  5;
    //5秒倒计时
    var timer = setInterval(function(){
        //秒数-1
        sec--;
        // 设置按钮里的文本内容
        but.innerHTML = sec+'秒'
        // 按钮 禁用
        but.disabled = true;
        //当秒数小于0,停止定时器
        if(sec <= 0){
            //停止定时器
            clearInterval(timer);
            //按钮的文字修改成获取验证码
            but.innerHTML = '获取验证码'
            //按钮取消禁用
            but.disabled = false;
        }
        

    },1000)

</script>

验证码倒计时也是常用的,一定要牢记哦。

今天的学习到此结束。

相关推荐
活宝小娜2 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----34 分钟前
QT中QString类的各种使用
开发语言·qt
lsx20240638 分钟前
SQL SELECT 语句:基础与进阶应用
开发语言
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
向宇it1 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
武子康1 小时前
Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试
java·开发语言·数据仓库·sql·mybatis·springboot·springcloud