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

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/128664533

这篇文章展示了如何使用JavaScript实现文字和背景颜色的闪烁效果，以及通过jQuery点击div元素触发不同样式展示。代码示例包括了一个定时器功能，用于在不同时间间隔改变文字颜色和大小，以创建闪烁动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习使用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>