缓存池【源代码】

最新推荐文章于 2022-05-09 17:48:37 发布

小管打天下

最新推荐文章于 2022-05-09 17:48:37 发布

阅读量176

点赞数

分类专栏：代码专栏

本文链接：https://blog.csdn.net/qq_42647547/article/details/118706846

版权

代码专栏专栏收录该内容

13 篇文章 1 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    </script>
</head>

<body>
    <div class="wrap">
        <div class="header">
            <h3>课程列表</h3>
        </div>
        <div class="course">
            <div class="loading">正在加载中...</div>
            <ul class="list js-list">
                <!-- <li class="list-item">
                    <div class="inner">
                        <div class="img">
                            <img src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLDiboQOYUxS35ibIhttPIYcanFhg8BH7kYNPzFVP3ms4h7DO5WC9tqxjnnrbhJ2uoXV4/356"
                                alt="">
                        </div>
                        <div class="info">
                            <h4>111</h4>
                            <p class="row-2">222</p>
                            <p class="row-3">333人学习</p>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        <div class="footer">
            <div class="btn-group">
                <div class="btn-item cur">
                    <a href="javascript:;" class="page-lk">1</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">2</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">3</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">4</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">5</a>
                </div>
            </div>
        </div>
    </div>


    <script type="text/html" id="J_itemTpl">
        <li class="list-item">
            <div class="inner">
                <div class="img">
                    <img src="http://images.lfclass.com/{{folder}}.jpg" alt="">
                </div>
                <div class="info">
                    <h4>{{classname}}</h4>
                    <p class="row-2">{{name}}老师</p>
                    <p class="row-3">{{watched}}人学习</p>
                </div>
            </div>
        </li>
    </script>

    <script src="js/jquery.min.js"></script>
    <script src="js/utils.js"> </script>
    <script src="js/index.js"> </script>
</body>

</html>

index.css

body {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    font-weight: normal;
}

ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

a{
    text-decoration: none;
}

.wrap{
    position: relative;
    width: 375px;
    height: 667px;
    margin: 100px auto;
    box-shadow: 0 0 5px #999;
}

.header {
    height: 44px;
    background-color: #000;
    text-align: center;
    line-height: 44px;
    color: #fff;
}

.course .loading{
    display: none;
    height: 44px;
    background-color: #eee;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
}

.course .list{
    height: 579px;
    overflow: auto;
}

.course .list-item {
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}

.course .list-item .inner {
    position: relative;
    height: 100%;
    border: 1px solid #000;
}

.course .list-item .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 141px;
}

.course .list-item .img img {
    width: 100%;
}

.course .list-item .info {
    width: 195px;
    padding-left: 151px;
}

.course .list-item .info p {
    font-size: 14px;
    margin-top: 8px;
}

.course .list-item .info .row-2 {
    color: green;
}

.course .list-item .info .row-3 {
    color: #999;
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 44px;
    width: 100%;
    border-top: 1px solid #eee;
    background-color: #fff;
}

.footer .btn-item {
    float: left;
    width: 20%;
    height: 100%;
}

.footer .btn-item.cur .page-lk{
    background-color: #ddd;
    color: #000;
}

.footer .btn-item .page-lk{
    display: block;
    width: 30px;
    height: 30;
    margin: 7px auto;
    background-color: #000;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

index.js

window.onload = function () {
    init();
}

function init() {
    initCourseList();
}

var initCourseList = (function () {
    var oBtnGroup = document.getElementsByClassName('btn-group')[0],
        oBtnItems = document.getElementsByClassName('btn-item'),
        oList = document.getElementsByClassName('js-list')[0],
        oTpl = document.getElementById('J_itemTpl').innerHTML,
        oLoading = document.getElementsByClassName('loading')[0],
        page = 0,
        t = null,
        cache = {};

    function init() {
        getAgaxCourses(page);
        bindEvent();
    }

    function bindEvent() {
        addEvent(oBtnGroup, 'click', btnClick);
    }

    function btnClick(e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            oParent = tar.parentNode,
            className = oParent.className,
            indexOf = Array.prototype.indexOf,
            thisIdx = -1;

        if (className === 'btn-item') {
            thisIdx = indexOf.call(oBtnItems, oParent);

            var len = oBtnItems.length,
                item;

            page = thisIdx;

            cache[page] ? getCacheCourses() : getAgaxCourses();

            for (var i = 0; i < len; i++) {
                item = oBtnItems[i];
                item.className = 'btn-item';
            }

            oParent.className += ' cur'
        }
    }

    function getAgaxCourses() {
        ajaxReturn({
            url: APIs.getCourses,
            data: {
                page: page
            },
            success: function (data) {
                cache[page] = data;
                oLoading.style.display = 'block';
                t = setTimeout(function () {
                    render(data);
                    oLoading.style.display = 'none';
                }, 500);
            },
            error: function () {
                alert('获取数据失败')
            }
        })
    }
    // 通过api地址请求时传入数据，然后等接口返回数据，返回的数据在success的参数里面

    function getCacheCourses() {
        var data = cache[page];
        render(data)
    }

    function render(data) {
        var list = '',
            len = data.length,
            item;


        for (var i = 0; i < len; i++) {
            item = data[i];

            list += setTplToHTML(oTpl, regTpl, {
                folder: item.folder,
                classname: item.classname,
                name: item.name,
                watched: item.watched
            })
        }
        oList.innerHTML = list;
    }

    return function () {
        init();
    }
})();

var APIs = {
    getCourses: 'http://study.jsplusplus.com/Index/getLfCourses'
}

// 封装ajax
function ajaxReturn(opt) {
    $.ajax({
        url: opt.url,
        type: 'POST',
        dataType: 'JSON',
        data: opt.data,
        timeout: 100000,
        success: opt.success,
        error: opt.error
    })
}

小管打天下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓存池【源代码】

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
复制链接

扫一扫