学习使用js实现文字和背景颜色闪烁效果

徊忆羽菲

已于 2023-12-21 09:42:52 修改

阅读量1.8k

点赞数 1

分类专栏： Javascript Html Jquery 文章标签： javascript 学习前端

于 2023-01-12 18:30:06 首次发布

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/128664533

版权

Html 同时被 3 个专栏收录

248 篇文章 8 订阅

订阅专栏

Javascript

231 篇文章 5 订阅

订阅专栏

Jquery

188 篇文章 1 订阅

订阅专栏

学习使用js实现文字和背景颜色闪烁效果

- 点击指定div闪烁代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字闪烁特效</title>
</head>
<body>

<span id="myDiv">奇葩天地网www.qipa250.com！</span>

<script>
    var flag = 0;
    var int = '';
    function start() {
        var text = document.getElementById("myDiv");
        if (!flag) {
            text.style.color = "red";
            text.style.background = "#0000ff";
            flag = 1;
        } else {
            text.style.color = "";
            text.style.background = "";
            flag = 0;
        }
        int = setTimeout("start()", 500);
    }

    start();
    setTimeout(function () {
        alert('停止了');
        window.clearInterval(int);
    }, 3000);
</script>
</body>
</html>

在这里插入图片描述

点击指定div闪烁代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字闪烁特效</title>
</head>
<body>

<span id="myDiv_1" onclick="sendQipa250('myDiv_1')">奇葩天地网！</span>

<span id="myDiv_2" onclick="sendQipa250('myDiv_2')">www.qipa250.com！</span>

<span id="myDiv_3" onclick="sendQipa250('myDiv_3')">www.奇葩250.com！</span>


<script src="jquery-2.1.4.min.js"></script>


<script>


    var time = 6;

    function sendQipa250(div_id) {
        if (time == 0) {//重新获取验证码
            $("#" + div_id).attr("style", "");
            time = 6;
            return false;//清除定时器
        } else {

            //单双数，展示不同的效果
            if (time % 2 == 0) {
                $("#" + div_id).attr("style", "color:red;background:#0000ff;font-size:23px");
            } else {
                $("#" + div_id).attr("style", "font-size:13px");
            }
            time--;
        }
        //设置一个定时器
        setTimeout(function () {
            sendQipa250(div_id)
        }, 500)
    }


</script>
</body>
</html>