当前位置：网站首页>Click event

Click event

2022-06-26 03:22:00 【Small vegetable bird yard live】 

<!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、 Get related elements 
        var prev = get('prev'),
            lis = get('nav').children,
            next = get('next'),
            ps = get('box').children,
            page = 0;
        // 2、 The beginning is li Before rendering 10 A name 
        for(var i=0;i<10;i++){
            lis[i].index = i;
            lis[i].innerHTML = data[i].name;
            // 3、 For each li Bind click event 
            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、 To the left and right button Bind click event 
        //  Right arrow event 
        next.onclick = function(){
            //  the number of pages +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{
                //  ten li The contents of the page become the contents of the current page 
                for(var i=0;i<10;i++){
                    lis[i].innerHTML = data[i+page].name;
                }
            }
            // box The content in is that of the first person on the current page 
            ps[0].innerHTML = data[page].name;
            ps[1].innerHTML = data[page].age;
            ps[2].innerHTML = data[page].xuehao;
        }
        //  Left arrow event 
        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 = ` Liang Fangyuan 
 Lixianwen 
 Qin Huihui 
 Pangxin 
 Luo Renli 
 Tangweiming 
 Yangjunquan 
 Long Guanxiong 
 Caoyinghao 
 Lan Yu 
 Huangguanbo 
 Liu Shuai 
 Zhangsiyun 
 Laiwenzhuo 
 Eujun 
 Lihanfeng 
 LAN Weige 
 Bao Shifu 
 Luhuaju 
 Panjunlong 
 Qiuyunxiang 
 Renchaorui 
 Suchenglin 
 Jiangxiongjie 
 Mo fanhao 
 Liangminjie 
 Huangruisheng 
 Luqifan 
 Ding Haifeng 
 Lijinxing 
 Mo Peiwen 
 Panguanjin 
 Weishuchong 
 Litianmin 
 Banlin 
 Li Nian 
 Wei Rongqi 
 Meng Jiawen 
 Lijinqing 
 Zhou Pengchao 
 Fucaiyu 
 Huang Yansong 
 Mengweiming 
 Liangyuee 
 Xuxianpiao 
 Xuzhengkun 
 Oudalio 
 Zhengqing 
 Lidexin 
 Lanjianyuan 
 Li Jinhui 
 Huangfengyi 
 Guan Peijia 
 Panglimin 
 Nonghao 
 Zeng Haixiang 
 Chenfujiu 
 Chen Keyu 
 Huang Yi 
 Huangqirui 
 Yangzhixin 
 Huangxiancai 
 Luhaiqi 
 Xuwenyi 
 Weiyuxin 
 Liang Yu 
 Chenminhao 
 Wuleyu 
 Liuyuchen 
 Xiepeiming 
 Huang Guoqing 
 Ning Yijian 
 WuWenTao 
 Huang Zhiyong 
 Gonghongwei 
 Li Wenlong 
 Nong Jianlei 
 Huangjunxiong 
 Huangwenxuan 
 Liukefan 
 Huang Jie 
 Tang Jie 
 Chenminghao 
 Liwanju 
 Chenliuyan 
 Huangliangyong 
 Master Lu 
 Yolang 
 Liangyongjie 
 Lubaozhe 
 Wuyuanhao 
 Sunke `;
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);

Renderings show
Insert picture description here

原网站

版权声明
本文为[Small vegetable bird yard live]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206260249289585.html

边栏推荐

猜你喜欢

随机推荐