阅读 104

chapter 7、JS----从入门到熟练的小白之路(持续更新....)

一、时间对象 (Date)

作用:用来处理日期和时间

如何创建时间对象

new Date()

var myDate = new Date(); //Tue Jun 15 2021 19:20:33 GMT+0800 (中国标准时间);
typeof myDate;  // "object" 获取到是一个对象,并不是字符串
复制代码

时间对象相关属性和方法

getFullYear();//获取年
getMonth();//获取月 0到11 代表1月到12月
getDate();//获取日期
getDay();//星期几 (0---6)代表周日到到周六
getHours();//时
getMinutes();//分
getSeconds();//秒
getMilliseconds();//毫秒
getTime();//获取当前日期到1970年1月1号 00:00:00 之间的毫秒差
toLocaleString();// 获取到的是年月日,时分秒"2019/12/25 上午10:15:50"
toLocaleDateString();//  获取到是字符串的年月日,例如:"2019/12/25"
toLocaleTimeString();// 获取到的是字符串的时分秒上午10:18:28
复制代码

二、时钟案例

css:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="clock" id="clock"></div>
</body>

</html>
复制代码

js:


<script>
    var clock = document.getElementById("clock");
    function getTime() {
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var day = time.getDay();
        var hour = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        var week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

        var res = year + "年" + addZero(month) + "月" + addZero(date) + "日" + week[day] + " " + addZero(hour) + ":" + addZero(minutes) + ":" + addZero(seconds);
        return res;
    }

    function addZero(num) {
        return num < 10 ? "0" + num : num;
    }
    var res = getTime();
    clock.innerText = res;
    setInterval(function () {
        var res = getTime();
        clock.innerText = res;
    }, 1000)
</script>
复制代码

三、定时器

定时器参数说明:

    // 定时器可以传递多个参数:
    // 1、执行的函数    2、时间     3、后面的参数就是执行函数在执行的时候传递的实参
    setTimeout(function(num,s,m){
        console.log(num,s,m);
    },1000,2,3,6);
复制代码

1、setTimeout

含义:在一定的时间后,去执行某些事情,是单词调用

setTimeout(function(){
    alert("我是定时器");
},1000)
复制代码

2、setInterval

间隔多少时间去做一件事,是多次调用

setInterval(function(){
    console.log("我还是定时器")
},1000)
复制代码

定时器室友返回值的:返回值代表定时器在当前页面的第几个

var time1=setTimeout(function(){
    console.log("我是定时器1");
},1000)

var time2=setInterval(function(){
    console.log("我是定时器2")
},1000)

var time3=setTimeout(function(){
    console.log("我是定时器3");
},1000)

console.log(time1)=====>1
console.log(time1)=====>2
console.log(time1)=====>3
复制代码

定时器是异步任务,只有当同步代码执行完毕之后,才能执行。

var time1=setTimeout(function(){
    console.log("吃饭");
},1000)

function fn(){
    console.log("睡觉")
}
fn();
复制代码

3、清除定时器的方法

  • clearTimeout
  • clearInterval


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

clearTimeout(time1);


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

clearInterval(time2)
复制代码

需求:

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

css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中奖</title>
    <style>
    #prize{
        width:200px;
        height:50px;
        border:1px solid green;
    }
    </style>
</head>
<body>
    <div class="prize" id="prize"></div>
</body>
</html>
复制代码
<script>
    function getCode(){
        var str="0123456789";
        var result="";
        for(var i=0;i<4;i++){
            var index=Math.floor(Math.random()*9);
            result+=str[index];
        }
        return result;
    }
    var prize=document.getElementById("prize");
    prize.innerHTML=getCode();
    var time=new Date().getTime();
    var time1=setInterval(function(){
        var newTime=new Date().getTime();
        var dif=(newTime-time)/1000;
        if(dif>5){
            clearInterval(time1);
        }
       var res= getCode();
       prize.innerHTML=res;
    },1000) 
</script>
复制代码
文章分类
前端
文章标签