setInterval的最简易用法Practice

最新推荐文章于 2023-12-03 11:30:48 发布

今Tina也要加油呀

最新推荐文章于 2023-12-03 11:30:48 发布

阅读量152

点赞数

分类专栏：初学者入门文章标签： javascript java 前端

本文链接：https://blog.csdn.net/Puzzle_L/article/details/130304936

版权

初学者入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时钟</title>
</head>
<body>
当前时间:<input type="text" id="timess" style="width: 300px">
<script>
    function showTime() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        //字符串拼接
        let str = year + "年" + month + "月" + day + "日   " + date.toLocaleTimeString() + ":" + date.getMilliseconds();
        document.getElementById("timess").value = str;
    }

    // 当页面加载时，显示，调用window中的加载事件(当页面加载完后执行）
    window.onload = showTime;
    // 定时的更新时间：setInterval（要执行代码或函数，间隔时长单位毫秒）
    window.setInterval("showTime()", 1000);
</script>
</body>
</html>

有参数的函数：

$(document).ready(function () {
    let page1;
    //就绪时就调用一次
    getPageContennt();
    //定时器要调用的函数有参数
    function getPageContennt(page) {
        //刚开始的时候就把页码信息给移除，否则页码框架每次就会加一
        $("#pageFrame li").remove();
        let pageIndex;
        console.log("拿到的页码数据:" + page);
        if (page != null && page != "") {
            pageIndex = page;
        }
        $.get("/ParkingManager/getAllCar.do", {
            pageIndex: pageIndex,
            time: Math.random()
        }, function (pageInfo) {
            /*console.log("异步带来的当前页码导航组:" + pageInfo.navigatepageNums)*/
            //只保留表格的表头信息
            $("#tab tr:gt(0)").remove();
            for (let i = 0; i < pageInfo.list.length; i++) {
                let car = pageInfo.list[i];
                let $newTr = $("<tr></tr>");
               //append添加
                $newTr.append("<td>" + car.carId + "</td>");
                $newTr.append("<td>" + car.carName + "</td>");
                $newTr.append("<td>" + formatDateUtilByDate(car.carEnterTime)
                    + "</td>");
                /*     console.log("离场时间:" + car.carLeaveTime);*/
                $newTr.append("<td>" +
                    formatDateUtilByDate(car.carLeaveTime)
                    + "</td>");
                $newTr.append("<td>" + car.carParkingPrice + "</td>");
                $("#tab").append($newTr);
            }

            /*此处预留展示为分页的框架*/
            $("#pageFrame").append(
                "<li>" + "<a href='javascript:void();' aria-label='Next' values='1' class='updatePage'><span aria-hidden='true'>" + "首页" + "</span></a>" + "</li>"
            );
            $("#pageFrame").append(
                "<li>" + "<a href='javascript:void();' aria-label='Next' values='" + pageInfo.prePage + "' class='updatePage'><span aria-hidden='true'>" + "上一页" + "</span></a>" + "</li>"
            );
            for (let i = 0; i < pageInfo.navigatepageNums.length; i++) {
                let pageIndexs = pageInfo.navigatepageNums[i];
                if (pageInfo.pageNum == pageIndexs) {  /*页码导航链接组为当前页*/
                    $("#pageFrame").append(
                        "<li className='active'>" + "<a href='javascript:void();' values='" + pageIndexs + "' class='updatePage'>" + pageIndexs + "</a>" + "</li>"
                    );
                } else {
                    $("#pageFrame").append(
                        "<li>" + "<a href='javascript:void();' values='" + pageIndexs + "' class='updatePage'>" + pageIndexs + "</a>" + "</li>"
                    );
                }
            }

            $("#pageFrame").append(
                "<li>" + "<a href='javascript:void();' aria-label='Next' values='" + pageInfo.nextPage + "' class='updatePage'><span aria-hidden='true'>" + "下一页" + "</span></a>" + "</li>"
            );
            $("#pageFrame").append(
                "<li>" + "<a href='javascript:void();' aria-label='Next' values='" + pageInfo.pages + "' class='updatePage'><span aria-hidden='true'>" + "尾页" + "</span></a>" + "</li>"
            );

        }, "json")
    }

  
    $("#pageFrame").on("click", ".updatePage", function () {
        let page = $(this).attr("values");
        page1 = page;
        console.log("拿到的页码信息:" + page);
        getPageContennt(page);
    })

  
    //setInterval方法，有参数
    setInterval(function () {
        getPageContennt(page1);
    }, 1000);

})

没有参数：

$(document).ready(function () {
    function verifyUser() {
        let userCookId = $("#userCookId").val();
        let userId = $("#userId").val();
        console.log("userCookId:" + userCookId);
        console.log("userId:" + userId);
        $.get("/LoginForWeb/verify.do", {
            userCookId: userCookId,
            userId: userId,
            time: Math.random()
        }, function (msg) {
            if (msg == "false") {
                alert("您的账号已经在其他地址登录，如不是您本人登录可能密码已经泄漏，请及时修改，现在将要退出您的账号");
                location.href = "/LoginForWeb/login.jsp";
            }
        })
    }

   //每3s扫描一次是否有异地登录
    window.setInterval(function () {
        verifyUser();
    }, 3000);
})

轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
<link href="css/轮播.css" rel="stylesheet">
</head>
<body>
<div id="dv_img">
  <img src="img/ad-01.jpg" onmouseover="stop()" onmouseout="start()"/>
  <img src="img/ad-02.jpg" onmouseover="stop()" onmouseout="start()"/>
  <img src="img/ad-03.jpg" onmouseover="stop()" onmouseout="start()"/>
  <img src="img/ad-04.jpg" onmouseover="stop()" onmouseout="start()"/>
</div>
<script src="js/轮播.js"></script>
</body>
</html>

#dv_img img:not(:first-of-type) {
    display: none;
}

let index = 0;

function lunBo() {
    index++;
    if (index > 3) {
        index = 0;
    }
    let imgs = document.getElementById("dv_img").getElementsByTagName("img");
    for (let i = 0; i < imgs.length; i++) {
        if (i == index) {
            imgs[i].style.display = "block";
        } else {
            imgs[i].style.display = "none";
        }
    }
}
let t = window.setInterval("lunBo()",1000);
// 停止轮播
function stop() {
    window.clearInterval(t);
}
// 开始轮播
function start() {
    t = window.setInterval("lunBo()",1000);
}

    let index = 0;
    let t = window.setInterval(lunBo, 1000);
    $("#scroll_img li img").mouseover(function () {
        window.clearInterval(t)
    }).mouseout(function () {
        t = window.setInterval(lunBo, 1000)
    })