利用html实现文字闪烁的效果代码

最新推荐文章于 2023-02-20 07:44:36 发布

徊忆羽菲

最新推荐文章于 2023-02-20 07:44:36 发布

阅读量4.5k

点赞数

分类专栏： Html Jquery Javascript

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

版权

Html 同时被 3 个专栏收录

248 篇文章 8 订阅

订阅专栏

Javascript

231 篇文章 5 订阅

订阅专栏

Jquery

188 篇文章 1 订阅

订阅专栏

利用html实现文字闪烁的效果代码

- 单个元素设置闪烁效果
- 多个元素设置闪烁效果

网页中使文字闪烁的标签是什么，其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现。

单个元素设置闪烁效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字闪烁</title>

</head>
<body>
<span id="blink"><b>奇葩天地网</b></span>
<script type = "text/javascript" >
function blinklink() {
    if (!document.getElementById('blink').style.color) {
        document.getElementById('blink').style.color = "red";
    }
    if (document.getElementById('blink').style.color == "red") {
        document.getElementById('blink').style.color = "#FFFFFF";
    } else {
        document.getElementById('blink').style.color = "red";
    }
    timer = setTimeout("blinklink()", 500);
}
function stoptimer() {
    clearTimeout(timer);
} 
blinklink()
</script> 
</body>
</html>

多个元素设置闪烁效果


<tbody id="list-data-shop">            <tr class="even pointer" id="shop_87881">
            <td class=" "><input type="checkbox" name="shop_checks[]" value="87881" class="shop_checkbox">
            </td>
            <td>87881</td>
            <td><a href="javascript:;" title="宝山旗舰店">宝山旗舰店
                                            <span class="blink" id="blink_87881" style="color: red;"><b>隐</b></span>
                                    </a>
            </td>      
        </tr>
            <tr class="even pointer" id="shop_87880">
            <td class=" "><input type="checkbox" name="shop_checks[]" value="87880" class="shop_checkbox">
            </td>
            <td>87880</td>
            <td><a href="javascript:;" title="黄埔江边小店">黄埔江边小店
                                            <span class="blink" id="blink_87880" style="color: red;"><b>隐</b></span>
                                    </a>
            </td>
        </tr>
</tbody>



<script type="text/javascript">

    function blinklink(id) {

        var blink_id = id;
        if (!document.getElementById(blink_id).style.color) {
            document.getElementById(blink_id).style.color = "red";
        }
        if (document.getElementById(blink_id).style.color == "red") {
            document.getElementById(blink_id).style.color = "#FFFFFF";
        } else {
            document.getElementById(blink_id).style.color = "red";
        }
        timer = setTimeout("blinklink('" + blink_id + "')", 500);
    }

    function stoptimer() {
        clearTimeout(timer);
    }
    
    function setBlink() {
        var blink = document.getElementsByClassName('blink');
        for (i = 0; i < blink.length; i++) {
            blinklink(blink[i].id);
        }
    }

    setBlink();

</script>

在这里插入图片描述

徊忆羽菲

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用html实现文字闪烁的效果代码

利用html实现文字闪烁的效果代码网页中使文字闪烁的标签是什么，其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字闪烁</title></head><body><span id="blink"><b>奇葩
复制链接

扫一扫