简单的告警闪烁效果

后台一些功能,经常一些选项发生变更之后其联动数据需要产品二次确认。然后…没有确认,导致错误添加一些翻译任务数据,又来找开发进行手动数据处理。为防止这种“老花眼”现象…做了一个简单的告警闪烁。

效果如下:

warning flashing

后台非常老旧…所以用原生的 JS 进行了简单实现,记录一下:

// 闪烁函数
function flash(id, count, originalColor) {
    if (count <= 0) return; // 闪烁3次后停止
    console.log(count);

    document.getElementById(id).style.backgroundColor = '#ff0000';
    setTimeout(() => {
        // 恢复原始颜色
        document.getElementById(id).style.backgroundColor = originalColor;
        setTimeout(() => {
            flash(id, count-1, originalColor); // 递归调用
        }, 500); // 原始颜色持续500ms
    }, 500); // 红色持续500ms
}

// 调用案例:闪烁 3 次
flash("lang_str", 3, document.getElementById('lang_str').style.backgroundColor);

转载请声明出处: MinsonLee的博客:https://minsonlee.github.io

扫描下方二维码,关注公众号,接收更多实时内容

新猿呓码

打赏一个呗

取消

感谢客官打赏,您的打赏使我动力十足!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦