JS原生封装提示函数、补0函数、判断是否登录、底部渲染导入tab、在标签前插入代码、根据秒获取时分秒、

最新推荐文章于 2024-08-23 21:34:50 发布

前端方程

最新推荐文章于 2024-08-23 21:34:50 发布

阅读量292

点赞数

分类专栏： js原生封装文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44040867/article/details/114280644

版权

js原生同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

封装

2 篇文章 0 订阅

订阅专栏

1、提示函数
2、补0函数
3、判断用户是否登录
4、底部渲染导入tab栏
5、在某标签前插入
6、根据秒数获取时分秒函数
7、获取年月日

1、提示函数

//提示框函数
function tips(msg, type = "succ", time = 2000) {
    let div = document.createElement("div");
    div.className = "tip-modal";
    div.innerHTML = `
    <div>
        <h4 class="${type==="succ"?'':'on'}">${type==="succ"?'√':'X'}</h4>
        <p>${msg}</p>
    </div>
    `;
    document.body.append(div);
    setTimeout(function() {
        div.remove();
    }, time)
}

2、补0函数

//补0函数
function fillZero(n) {
    return n <= 9 ? "0" + n : n;
}

3、判断用户是否登录

```javascript
//判断用户是否登录
function isLogin() {
    let userId = localStorage.getItem("uid");
    if (!userId) { //没有登录就没有获取到
        tips("请先登录", "err");
        setTimeout(function() {
            location.href = "./login.html";
        }, 2000)
        return false;
    }
    return userId;
}

4、底部渲染导入tab栏

//底部tab栏
function addBottomTab(info = "home") {
    let footer = document.createElement("footer");

    footer.innerHTML = `
    <a href="./home.html" class="${info=='home'?'active':''}">
        <span class="iconfont iconhome"></span>
        <i>首页</i>
    </a>
   
    <a href="./run.html" class="${info=='sport'?'active':''}">
        <span class="iconfont iconsports"></span>
        <i>运动</i>
    </a>
    <a href="#">
        <span class="iconfont iconcircle"></span>
        <i>圈子</i>
    </a>
    <a href="./my.html" class="${info=='my'?'active':''}">
        <span class="iconfont iconmine"></span>
        <i>我的</i>
    </a>

    `
    document.body.appendChild(footer)
}

5、在某标签前插入

function addSportTab(msg = "run") {
    let header = document.createElement("header");
    header.className = "sport-header container";
    header.innerHTML = `
    <a href="./run.html" class="${msg=='run'?'active':''}">跑步</a>
    <a href="./ride.html" class="${msg=='ride'?'active':''}">骑行</a>
    <a href="./course.html" class="${msg=='course'?'active':''}">课程训练</a>
    `;
    //在main之前插入header
    document.body.insertBefore(header, document.querySelector("main"))
}

6、根据秒数获取时分秒函数

//根据秒获取时分秒
function formatT(sec) {
    let h = parseInt(sec / 3600 % 24);
    let m = parseInt(sec / 60 % 60);
    let s = parseInt(sec % 60);
    return [fillZero(h), fillZero(m), fillZero(m)] + join(':');
}

7、获取年月日

//获取年月日
function getNowDate(sep = "/") {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1; //返回的0到11
    let d = date.getDay();
    return [y, fillZero(m), fillZero(d)].join(sep);
}

归总

//挂在window上
window.$utils = {
    tips: tips,
    fillZero: fillZero,
    isLogin: isLogin,
    addBottomTab: addBottomTab,
    addSportTab: addSportTab,
    formatT: formatT
}