网页标签闪烁 + 显示隐藏密码

时间:2022-07-28
本文章向大家介绍网页标签闪烁 + 显示隐藏密码,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

出自前端积累文档

感觉标签闪烁蛮有意思的,再加一篇凑一下字数。点击下方阅读原文,查阅文档,里面会有平时的积累。

网页标题/标签 闪烁

效果:

实现代码

let beforeTitle = document.title; // 原标签
let count = 0; // 切换title
function blinkNewMsg(val) {
  document.title =
    count % 2 == 0 ? `【   】${beforeTitle}` : `【${val}】${beforeTitle}`;
  count++;
}
setInterval(() => {
  blinkNewMsg('新消息');
}, 1000);

显示隐藏密码

超简单,就是切换input框的type类型:

function isShow() {
    let input = document.getElementById("inputId"); // input的dom
    if (input.type == "password") {
        input.type = 'text'; // 显示
    } else {
        input.type = 'password'; // 隐藏
    }
}

CodePen: demo

觉得还不错的话,给我的项目点个star

游泳、健身了解一下:博客、前端算法、公众号