当前位置：网站首页>点击事件

点击事件

2022-06-26 02:50:00 【小菜鸟码住】 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .header{
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .header button{
            float: left;
            width: 100px;
            height: 50px;
        }
        #nav{
            width: 1000px;
            height: 50px;
            float: left;
        }
        #nav li{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            float: left;
            cursor: pointer;
        }
        .box{
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="header">
        <button id="prev"><</button>
        <ul id="nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button id="next">></button>
    </div>
    <div id="box" class="box">
        <p></p>
        <p></p>
        <p></p>
    </div>

    <script src="data.js"></script>
    <script>
        // 1、获取相关元素
        var prev = get('prev'),
            lis = get('nav').children,
            next = get('next'),
            ps = get('box').children,
            page = 0;
        // 2、初始在li中渲染前10个姓名
        for(var i=0;i<10;i++){
            lis[i].index = i;
            lis[i].innerHTML = data[i].name;
            // 3、给每个li绑定点击事件
            lis[i].onclick = function(){
                ps[0].innerHTML = data[page+this.index].name;
                ps[1].innerHTML = data[page+this.index].age;
                ps[2].innerHTML = data[page+this.index].xuehao;
            }
        }
        // 4、给左右button绑定点击事件
        // 右箭头事件
        next.onclick = function(){
            // 页数+10
            page += 10;
            if(page>data.length){
                page -= 10;
                return;
            }
            if(page===parseInt(data.length/10)*10){
                for(var i=0;i<data.length%10;i++){
                    lis[i].innerHTML = data[i+page].name;
                }
                for(var i=data.length%10;i<10;i++){
                    lis[i].innerHTML = '';
                }
            }else{
                // 十个li的内容变成当前页的
                for(var i=0;i<10;i++){
                    lis[i].innerHTML = data[i+page].name;
                }
            }
            // box里的内容是当前页的第一个人的
            ps[0].innerHTML = data[page].name;
            ps[1].innerHTML = data[page].age;
            ps[2].innerHTML = data[page].xuehao;
        }
        // 左箭头事件
        prev.onclick = function(){
            if(page == 0){
                return;
            }
            page -= 10;
            for(var i=0;i<10;i++){
                lis[i].innerHTML = data[i+page].name;
            }
            ps[0].innerHTML = data[page].name;
            ps[1].innerHTML = data[page].age;
            ps[2].innerHTML = data[page].xuehao;
        }
    </script>
</body>
</html>

JS

var str = `梁方圆
李宪文
覃荟卉
庞鑫
罗壬力
唐伟明
杨钧全
龙冠雄
曹英豪
蓝宇
黄冠博
刘帅
张思芸
赖文卓
欧军
李汉峰
蓝伟格
包仕富
卢华巨
潘俊龙
丘云祥
任朝锐
苏成林
蒋雄杰
莫凡浩
梁敏杰
黄瑞生
陆启扇
丁海峰
李金醒
莫培文
潘冠瑾
韦树冲
黎天敏
班琳
李念
韦荣崎
蒙家文
李锦清
周鹏超
付彩玉
黄筵淞
蒙伟明
梁月娥
许先漂
许政坤
欧大偲
郑庆
李德鑫
蓝剑源
李金辉
黄凤仪
管培嘉
庞礼民
农昊
曾海祥
陈福桔
陈柯宇
黄熠
黄奇锐
杨志鑫
黄贤才
陆海琦
许文怡
韦雨欣
梁昱
陈旻昊
吴乐裕
刘育辰
谢沛明
黄国庆
宁一健
吴文韬
黄志勇
龚鸿炜
李文龙
农建磊
黄珺雄
黄文轩
刘可凡
黄颉
唐洁
陈铭豪
李婉菊
陈柳延
黄良勇
陆师
尤朗
梁永杰
陆保哲
吴元豪
孙珂`;
function get(id){
    return document.getElementById(id);
}
function log(msg){
    console.log(msg)
}
var arr = str.split('\n');
var data = [];
for(var i=0;i<arr.length;i++){
    data.push({
        name:arr[i],
        age: 15+parseInt(Math.random()*10),
        xuehao: 123456789+parseInt(Math.random()*123456789),
    })
}
log(data);

效果图展示
在这里插入图片描述

原网站

版权声明
本文为[小菜鸟码住]所创，转载请带上原文链接，感谢
https://blog.csdn.net/hfyldx/article/details/102231277

边栏推荐

猜你喜欢

随机推荐