js动画案例

小人物.0907

于 2024-06-11 18:49:35 发布

阅读量195

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_66400200/article/details/139606198

版权

js动画的三个基础案例

协议按钮
- 手机验证码
- - 物体渐变

协议按钮

<textarea name="" id="" rows="10" cols="20">
        协议内容，没有用
    </textarea>
    <button disabled>请仔细阅读以上协议（5）</button>

var button = document.getElementsByTagName('button')[0]
    var num = 5
    var timer = setInterval(function () {
        num--
        // button.innerHTML = "请仔细阅读以上协议（" + num + "）"
        button.innerHTML = `请仔细阅读以上协议（${num}）`
        if (num <= 0) {
            clearInterval(timer)
            button.innerHTML = "同意"
            button.disabled = false
        }
    }, 1000)
    button.onclick = function () {
        console.log('测试');
    }

手机验证码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 200px;
            height: 50px;
            background-color: aquamarine;
            border: 0;
            font-size: 25px;
            color: white;
        }
    </style>
</head>

<body>
    <button>获取验证码</button>
</body>


var button = document.getElementsByTagName('button')[0]

    button.addEventListener('click', function () {
        var num = 6
        // console.log('测试');
        // console.log(this);
        var that = this
        // this.innerHTML = num
        var timer = setInterval(function () {
            // console.log(that);
            num--
            that.disabled = true
            that.innerHTML = num
            if (num <= 0) {
                that.disabled = false
                that.innerHTML = '重新获取'
                clearInterval(timer)
            }
        }, 1000)
    })

物体渐变

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 400px;
            background-color: red;
            /* opacity: 0.5; */
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>

var box = document.getElementById('box')
    var opactiveStyle = 10
    box.onmouseenter = function () {
        // var timer = setInterval(() => {
        //     console.log(this);
        //     // this.style.opacity = 0
        // }, 100)
        var that = this
        var timer = setInterval(function () {
            opactiveStyle--
            // console.log(opactiveStyle);
            that.style.opacity = opactiveStyle / 10
            if (opactiveStyle <= 0) {
                clearInterval(timer)
            }
        }, 100)
    }