协议按钮/定时器小案例

重点：

1.协议按钮
2.div 渐变
3.div 变宽
4.div 移动

//div要移动,要脱离文档流—position:absolute
//如果样式的代码是在style的标签中设置,外面是获取不到
//如果样式的代码是在style的属性设置,外面是可以获取
//获取div的当前位置
//console.log(div.offsetLeft);

协议按钮

Html

<textarea name="texta" id="" cols="30" rows="10">
    这个世界就是这么疯狂，你不同意我就不给你注册
</textarea>
<input type="button" value="请仔细阅读协议(5)" disabled>

Js

let btn = document.querySelector("input");
let time = 5;
let tim = setInterval(() => {
    time--;
    btn.value = "请仔细阅读协议(" + time + ")";
    if (time <= 0) {
        clearInterval(tim);
        btn.disabled = false;
        btn.value = "同意协议";
    }
}, 1000)

渐变

Css

div {
    width: 300px;
    height: 200px;
    background-color: pink;
}

Html

<div>

</div>
<input type="button" value="透明">

Js

let dv = document.querySelector("div");
    let btn = document.querySelector("input");
    let opacity = 10;
    btn.onclick = () => {
        let time = setInterval(() => {
            opacity--;
            dv.style.opacity = opacity / 10;
            if (opacity<=0) {
                clearInterval(time);//清理定时器
            }
        }, 200)
    }

变宽

Css

* {
    margin: 0;
    padding: 0;
}
div {
    width: 200px;
    height: 100px;
    background-color: pink;
    
}

Html

<input type="button" value="变宽">
<input type="button" value="停止变宽">
<input type="button" value="变窄">
<hr>
<input type="button" value="变长">
<input type="button" value="停止变长">
<input type="button" value="变短">
<div></div>

Js

let btn = document.querySelectorAll("input");
let dv = document.querySelector("div");
let w = 200;
let h = 100;
let time = null;
let time1 = null;

let bol = false;
let bol1 = false;

btn[0].onclick = () => {
    if (bol) {
        return;
    }
    bol = true;
    time = setInterval(() => {
        w++;
        dv.style.width = w + "px";
    }, 20)
}

btn[1].onclick = () => {
    bol = false;
    clearInterval(time);
}

btn[2].onclick = () => {
    if (bol) {
        return;
    }
    bol = true;
    time = setInterval(() => {
        w--;
        dv.style.width = w + "px";
        if (w <= 0) {
            bol = false;
            clearInterval(time);
        }
    }, 20)
}

btn[3].onclick = () => {
    if (bol1) {
        return;
    }
    bol1 = true;
    time1 = setInterval(() => {
        h++;
        dv.style.height = h + "px";
    }, 20)
}

btn[4].onclick = () => {
    bol1 = false;
    clearInterval(time1);
}

btn[5].onclick = () => {
    if (bol1) {
        return;
    }
    bol1 = true;
    time1 = setInterval(() => {
        h--;
        dv.style.height = h + "px";
        if (h <= 0) {
            bol1 = false;
            clearInterval(time1);
        }
    }, 20)
}

移动

Css

* {
    margin: 0;
    padding: 0;
}
div {
    width: 200px;
    height: 100px;
    background-color: pink;
    position: absolute;
    top: 40px;
    left: 0;
}

Html

<input type="button" value="向右移动600px">
<input type="button" value="向左移动600px">
<input type="button" value="向上移动600px">
<input type="button" value="向下移动600px">
<div>

</div>

Js

let btn = document.querySelectorAll("input");
let dv = document.querySelector("div");

let time = null;
let bol = false;
let x = "x";
let y = "y";
let d;

fn = (t, h, l) => {
    if (bol) {
        return;
    }
    bol = true;
    if (t == x) {
        d = dv.offsetLeft;
    } else {
        d = dv.offsetTop;
    }
    time = setInterval(() => {
        if (h == 0) {
            d++;
        } else if (h == 1) {
            d--;
        }
        if (t == x) {
            dv.style.left = d + "px";
        } else {
            dv.style.top = d + "px";
        }
        if (d % l == 0 || d <= 0) {
            clearInterval(time);
            bol = false;
        } else if (t == y && d <= 40) {
            clearInterval(time);
            bol = false;
        }
    }, 20)
}


btn[0].onclick = () => {
    fn(x, 0, 600);
}
btn[1].onclick = () => {
    fn(x, 1, 600);
}
btn[2].onclick = () => {
    fn(y, 1, 600);
}
btn[3].onclick = () => {
    fn(y, 0, 600);
}