JS基础:定时器

定时器

种类:
①一次性定时器
②持续性定时器
理解:延迟多久后开始执行目标代码块
语法:setTimeout(目标方法,延迟时间,实参们);

---

一次性定时器

定义一个方法:

console.log("开始")
开启一次性定时器
setTimeout(function (){
    console.log("一次性定时器1")
},2000);

每个定时器自身都独立存在

setTimeout(function(){
    console.log("一次性定时器2")
},1999);

定时器的执行方法为已经定义好的方法

setTimeout(timeoutFn,2500,"一次性定时器的实参");

console.log("定时器开启之后打印逻辑");

function timeoutFn(str,num){
    console.log("str:" + str + "num" + num);
}

持续性定时器

延迟多长时间后执行第一次目标代码块,且之后每间隔该段时间,再执行目标代码块,周而复始.
setInterval(function(){
    console.log("持续性定时器");
},2000);

拓展:
修改页面标签标题

---

利用定时器修改标题

定时器第一次执行不是立刻执行,所以立刻执行的预聚体应该单独书写
<script>
var count = 1;
document.title = 1;
定时器1s计时器+1,并更新给标签标题
var timer = setInterval(function(){
    document.title = ++count;
},1000);
定时器返回值的本质
console.log("timer:" + timer);
获取页面h1标签
var h1 = document.querySelector("h1");
h1的点击事件
h1.onclick = function(){
    修改标签标题
    document.title = "修改标题";
    停止定时器
    clearInterval(timer);   
</script>

---

获取浏览器事件对象

var date = new Date(2018-1-1);
console.log(date);

转换为本地之间字符串:通用
var dateStr = date.toLocalString();
console.log(dateStr);

年
var year = date.getFullyear();
console.log(year);

月:从零开始计数,1月的mouth值为0;
var month = date.getMonth();

周几:周日为一星期第一天,week值为0;
var week = date.getDay();
console.log(week);

日
var day = date.getDate();
console.log(day);

小时
var hour = date.getHours();
console.log(hour);

秒
var second = date.get Seconds();
console.log(second);

---

定时器清除

开启定时器
var t1 = setTimeout(function(){
    console.log("一次性定时器- ②号")
},1000);
console.log(t1);
清除定时器:两者都可以清除一次性和持续性定时器:
//clearTimeout(t1);
clearInterval(t1);

定时器(返回值)的本质就是创建定时器的number编号,且会逐一递增
var t2 = setTimeout(function(){
    console.log("持续性定时器 2")
},1000);
console.log(t2);
var t3 = setInterval(function){
    console.log("持续性定时器 3")
},1000);
console.log(t3);

var t4 = setInterval(function){
    console.log("持续性定时器 4")
},1000);
conssole.log(t4);

clearInterval(t4);
总结:如果页面中存在多个定时器,且非只有顺序结构的
逻辑 - 如果一次性将所有定时器清除掉

document.onclik = function(ev){
    var timeout = setTimeout(function(){
    });
    for(var i=0;i<timeout;i++){
        clearTimeout(i);
    }
}

---

电子钟

<style>
.clock{
        width:360px;
        height:120px;
        border:5px solid skyblue;
        margin:50px auto 0;
        font:normal 50px/120px "微软雅黑";
        text-align:center;
        color:darkblue;
        border-radius:30px;
    }
.clock.active{
        background-color: wheat;
        color:brown;
    }
.btn{
        width:480px;
        height:80px;
        margin:120px auto 0;
        position:rleative;
    }
.stop,.run{
        position:absolute;
        top:0;
        border:10px solid brown;
        border-radius: 10px;
        font: bold 28px/60px "STSong";
        text-align: center;
        width: 100px;
        height: 60px;
        cursor: pointer;
    }
.stop{
    left: 0;}
.run{
    right: 0;}      
</style>

<script>
获取页面元素
var clock = document.querySelector(".clock");
var stop = document.querySelector(".stop");
var run = document.querySelector(".run");

获取格式化后的时间字符串
function getDateString(){
    var date = new Date();
    var y = date.getFullYear();
    M = formateDate(M);
    var d = date.getDate
    d = formateDate(d);
    var h = date.getHours();
    h = formateDate(h);
    var m = date.getMinutes();
    m = formateDate(m);
    var s = date.getSeconds();
    s = formateDate(s);

    return y + " - " +  M  + " - " + d + " " + h + ":" + m + ":" + s;

    格式化时间 - 1s => 01s
    function formateDate(){
        return num > 10 ? "0" + num : num;
    }
    设置页面时间
    function setElementTime() {
    var time = getDateString();
    clock.innerText = time;
}


    var timer = null;
    //开启定时器
    function setTimer() {
        //定时器开启的安全操作(非常重要的清理)
        clearInterval(timer);
        //定时器创建第一步刷新页面时间
        setElementTime();
        //定时器然后再固定时间更新一次页面时间
        timer = setInterval(function () {
            setElementTime();
        },300);
    };

    //定时器默认为开启


    // setTimer();

    // setInterval(function () {
    //     setElementTime();
    // },1000);

    //定格事件
    stop.onclick = function () {
        //关闭定时器
        clearInterval(timer);
        //clock拥有定格属性
        clock.className += " active";
    };

    //流光事件
    run.onclick = function () {

        //重新开启定时器
        setTimer();

        clock.className = "clock";
    }
    //页面加载成功后,便可以开启时钟
    window.onload = function () {
        //页面加载成功后,代表时钟可以被加载并计时
        setTimer();
    }