数据分页，一次翻页

最新推荐文章于 2020-09-27 19:02:14 发布

Study 365 Always

最新推荐文章于 2020-09-27 19:02:14 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/L8676/article/details/100118463

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .b1 > ul {
            display: inline-block;
        }

        .b1 > ul > li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid silver;
        }

        .b1 > button {
            width: 100px;
            height: 30px;
            border: 1px solid silver;
            background: transparent;
            outline: none;
        }

        .bgcolor {
            background: #32bcff;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="b1">
    <button id="uppage">上一页</button>
    <ul class="menu">
        <li class="bgcolor">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <button id="downpage">下一页</button>
</div>
<script>
    var uppage = document.getElementById("uppage");
    var downpage = document.getElementById("downpage");
    var menu = document.getElementsByClassName("menu")[0].children;
    downpage.onclick = function () {
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) + 10;
        }
    }
    uppage.onclick = function () {
        if (parseInt(menu[0].innerHTML) <= 1) {
            return;
        }
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) - 10;
        }
    }
    for (var i = 0; i < menu.length; i++) {
        menu[i].onclick = function () {
            for (var k = 0; k < menu.length; k++) {
                menu[k].className = "";
            }
            this.className = "bgcolor";
        }
    }
</script>
</body>
</html>

Study 365 Always

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据分页，一次翻页

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0;...
复制链接

扫一扫