day7JS-时间对象

傻虎贼头贼脑

于 2024-08-21 15:17:08 发布

阅读量536

点赞数 10

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kwj258036/article/details/141172469

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 时间对象

1.1 作用

Date 对象用于处理日期和时间。

1.2 创建时间对象

写法一：
new Date（）:获取系统当前时间。

写法二：传参，字符串，字符串的样式必须是xxxx-xx-xx xx:xx:xx的样式。
new Date（""）:获取指定的时间。

写法三：使用“逗号”隔开传参，该方法如果是多位数，0不能做开头。
new Date（xxxx,x,x,x,x,x）:获取指定的时间。

案例:

<body>
    <script>
        //写法一：
        let date1 = new Date();
        console.log(date1);//Wed Aug 14 2024 10:16:31 GMT+0800 (中国标准时间)，是一个时间对象

        //写法二：
        let date2 = new Date("2014-08-14 12:00:00");
        console.log(date2);//Thu Aug 14 2014 12:00:00 GMT+0800 (中国标准时间)

        //写法三：
        let date3 = new Date(2014, 8, 12, 12, 0, 0);
        console.log(date3);//Fri Sep 12 2014 12:00:00 GMT+0800 (中国标准时间)
    </script>
</body>

1.3 时间对象相关属性和方法

getFullYear(); :获取年。

getMonth(); :获取月，月份是从0到11，代表1月到12月。0代表1月份，11代表12月份。

getDate(); :获取日期。

getDay(); :星期几，星期几是从0到6，代表周日到到周六。

getHours(); :时。

getMinutes(); :分。

getSeconds(); :秒。

getMilliseconds(); :毫秒。

getTime(); :获取当前日期到1970年1月1号 00：00:00 之间的毫秒差。

toLocaleString(); :获取到的是字符串的年月日时分秒，例如："2024/1/26 上午10:15:50"。

toLocaleDateString(); :获取到是字符串的年月日，例如："2024/1/26"。

toLocaleTimeString(); ：获取到的是字符串的时分秒，例如：上午10:18:28。

<body>
    <script>
        let date = new Date();
        console.log(date);//Wed Aug 14 2024 09:57:58 GMT+0800 (中国标准时间)
        console.log(date.getFullYear());
        console.log(date.getMonth());
        console.log(date.getDate());
        console.log(date.getDay());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        console.log(date.getMilliseconds());
        console.log(date.getTime());
        console.log(date.toLocaleString());
        console.log(date.toLocaleDateString());
        console.log(date.toLocaleTimeString());
    </script>
</body>

1.4 案例：钟表

<body>
    <h1 id="getClock">时钟:</h1>
    <script>
        function getClock() {
            let presentTime = new Date;
            let year = presentTime.getFullYear();//年
            let month = presentTime.getMonth() + 1;//月
            let date = presentTime.getDate();//日

            let day = presentTime.getDay();//星期几
            let weekStr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
            let week = weekStr[day];

            let hours = presentTime.getHours();//时
            let minutes = presentTime.getMinutes();//分
            let seconds = presentTime.getSeconds();//秒

            let result = `${year}年${addZero(month)}月${addZero(date)}日${week}${addZero(hours)}时${addZero(minutes)}分${addZero(seconds)}秒`;
            return result;
        }

        let getClocks = getClock();
        //获取标签
        let h1 = document.querySelector("h1");
        //向标签中写入内容
        h1.innerHTML = `时钟：${getClocks}`;

        // 补0函数
        function addZero(n) {
            return n >= 10 ? n : "0" + n;
        }
    </script>
</body>

补0方法详解：

方法一：

function addZero(n) {
            return n >= 10 ? n : "0" + n;
        }

方法二：转化为字符串，判断长度。

function addZero(n) {
            return n.toString().length >= 2 ? n : "0" + n;
        }

方法三：补0，使用substr() 或 slice() 到着截取。

function addZero(n) {
            // return ("0" + n).substr(-2, 2);
            return ("0" + n).slice(-2);
        }

2. 定时器

2.1 定时器的分类

一次性定时器 ：例如：倒计时。
周期性定时器：例如：轮播图。

2.2 定时器的使用步骤

步骤一：先创建一个变量未来接收定时器。

步骤二：使用定时器。

步骤三：使用完毕后释放。

2.3 setTimeOut（一次性定时器）

在一定的时间后，去执行某些事情，是单次调用。

setTimeOut(回调函数,周期时间,...)

注意！！！

第一个参数：回调函数。

第二个参数：周期时间，单位是毫秒。

第三个参数：给回调函数传实参（参数1，参数2，...）,该参数可省略。

<body>
    <h1>标题</h1>
    <script>
        // 步骤一：先创建一个变量未来接收定时器
        let timer = null;
        //步骤二：使用定时器
        timer = setTimeout(() => {
            let h1 = document.querySelector("h1");
            h1.innerHTML = "你好"
            // 步骤三：使用完毕后释放
            clearTimeout(timer);
            timer = null;
        }, 1000)
    </script>
</body>

2.4 setInterval（周期性定时器）

在间隔多少时间后，去执行某些事情，是多次调用。

setInterval(回调函数,周期时间,...)

注意！！！

第一个参数：回调函数。

第二个参数：周期时间，单位是毫秒。

第三个参数：给回调函数传实参（参数1，参数2，...）,该参数可省略。

<body>
    <h1>标题</h1>
    <script>
        // 步骤一：先创建一个变量未来接收定时器
        let timer = null;
        let num = 0;
        let h1 = document.querySelector("h1");
        //步骤二：使用定时器
        timer = setInterval(() => {
            num++;
            h1.innerHTML = "标题" + num;
            // 步骤三：如果想要定时器停止，要加判断条件，使用完毕后释放
            if (num >= 5) {
                clearInterval(timer);
                timer = null;
            }
        }, 500);
    </script>
</body>

2.5 定时器是有返回值的，返回值代表定时器处于当前页面中的第几个

var time1=setTimeout(function(){
    console.log("wasai!you are beautiful");
},1000)


var time2=setInterval(function(){
    console.log("我真美！")
},1000)

var time3=setTimeout(function(){
    console.log("aa");
},1000)

console.log(time1)=====>1
console.log(time2)=====>2
console.log(time3)=====>3

2.6 定时器是异步任务，只要当咱们同步代码执行完毕之后，才能执行。

3. 清除定时器的方法

clearTimeout（定时器变量名）：一次性定时器的清除定时器的方法。

clearInterval（定时器变量名）：周期性定时器的清除定时器的方法。

 var time1=setTimeout(function(){
       console.log('1')
 },1000)

clearTimeout(time1);


var time2=setInterval(function(){
    console.log("in")
},1000);

clearInterval(time2)

4. 练习

4.1 练习1

做一个抽奖程序，页面中有一个区域显示中奖人员的编号，在JS中写一段代码，要求每隔1秒中随机创建一个四位的数字（每一位数字的取值范围0-9），当10秒结束后，结束定时器，最后显示的四位数字即是中奖的号码。

<body>
    <h1>中奖人员编号:</h1>
    <button id="btn">抽奖</button>
    <script>

        /* 做一个抽奖程序，页面中有一个区域显示中奖人员的编号，
            在JS中写一段代码，要求每隔1秒中随机创建一个四位的数字（每一位数字的取值范围0-9），
            当10秒结束后，结束定时器，最后显示的四位数字即是中奖的号码 */

        //创建4为随机数
        function getRandom() {
            let code = "";
            for (let i = 0; i < 4; i++) {
                code += Math.floor(Math.random() * 10);
            }
            return code;
        }

        let h1 = document.querySelector("h1")

        // 点击，开始抽奖
        btn.onclick = function () {
            //每一秒执行函数生成随机数
            let timer1 = setInterval(() => {
                h1.innerHTML = getRandom();
            }, 1000);

            //10秒后暂停定时器
            let timer2 = setInterval(() => {
                clearInterval(timer1);
                timer1 = null;

                clearInterval(timer2);
                timer2 = null;
            }, 10000);

        }
    </script>
</body>

4.2 练习2

前置知识：随机数

Math.random() ：获取0~1 之间的随机数(大于等于0，小于1)。

1. 包前包后 [ min，max ]

Math.round( Math.random() * (max - min) )+ min

parseInt( Math.random() * ( max - min + 1) + min )

Math.floor(Math.random() * (max- min +1 ))+ min

2. 包前不包后 [ min，max )

Math.floor( Math.random() * (max - min) )+ min

3. 不包前包后（ min，max ]

Math.ceil( Math.random() * (max - min) )+ min

4. 在JS中时间减时间的运算得到的是一个时间戳。把时间戳换算成天，时，分，秒的公式如下：

//天
let date = Math.floor(diffTime / (24 * 60 * 60 * 1000));
//小时
let hours = Math.floor(diffTime / (60 * 60 * 1000) % 24);
//分
let minutes = Math.floor(diffTime / (60 * 1000) % 60);
//秒
let seconds = Math.floor(diffTime / 1000 % 60);

倒计时案例：

<body>
    <h1></h1>
    <script>
        let goalTime = new Date("2024-08-15 16:16:00");
        function getTime() {
            let nowTime = new Date();
            let diffTime = goalTime - nowTime;
            if (diffTime <= 0) {
                clearInterval(timer);
                timer = null;
                return "倒计时结束"
            }
            let date = Math.floor(diffTime / (24 * 60 * 60 * 1000));
            let hours = Math.floor(diffTime / (60 * 60 * 1000) % 24);
            let minutes = Math.floor(diffTime / (60 * 1000) % 60);
            let seconds = Math.floor(diffTime / 1000 % 60);
            let str = `${date <= 0 ? "" : date + "天"}${hours <= 0 ? "" : hours + "时"}${minutes <= 0 ? "" : minutes + "分"}${seconds <= 0 ? "" : seconds + "秒"}`;
            return str;
        }
        let h1 = document.querySelector("h1");
        h1.innerHTML = `距离2024-08-15 16:16:00还有：${getTime()}`;

        let timer = setInterval(() => {
            h1.innerHTML = `距离2024-08-15 16:16:00还有：${getTime()}`;
        }, 1000);
    </script>
</body>