自定义PC端文字广告代码

博主： Yawee
发布时间：2019 年 08 月 08 日
3267次浏览
6 条评论
2756字数
分类：学无止境

仿广告联盟的文字广告，只在PC端显示，支持设置广告到期时间。
![自定义PC端文字广告代码](https://static.chinsea.net/images/2019/08/08/20190808161722.png)

css部分：
```
<style>
    .yawee-hover-underline:hover {
        text-decoration: underline;
    }
    .yawee-adbox a {
        color: #777;
        text-decoration: none;
        cursor: pointer;
    }
    .yawee-hide {
        display: none;
    }
    .yawee-background-color-white {
        background: white;
    }
    .yawee-radius-4 {
        border-radius: 4px;
    }
    .yawee-text-nowrap {
        white-space: nowrap;
    }
    .yawee-text-yellow {
        color: #FFB800 !important;
    }
    .yawee-text-red {
        color: #FF5722 !important;
    }
    .yawee-text-blue {
        color: #0e90d2 !important;
    }
    .yawee-text-b {
        font-weight: bold !important
    }
    @media screen and (max-width:720px) {
        .yawee-adbox {
            display: none;
        }
    }
</style>
```

html部分：
```
<div class="yawee-adbox">
    <div id="_adbox" class="yawee-container yawee-hide">
        <div class="yaw.ee">
            <div class="yawee-background-color-white yawee-radius-4" style="position:relative;padding:6px 2px">
                <table style="border:0;width:100%;font-size:14px"></table>
                <i style="position:absolute;width:22px;height:12px;bottom:0;right:0;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAABg0lEQVQ4T7WTsWvCQBTGv9giGMgNDRTRxkHdK1Ts5qKQsdS9/0ChOIhginM1oxS6l+JacBQ7ubX/gC4uWuUQ4pBABEm1PEFJNNJBetPxvrsf333vngBAAHAB4AzAKY5bPwAMAN8EVQCcH8fbu80JfOnnVFVVpuv6bSqVenVfazabGc65VSqVet1ut5DNZt99TDkEvnILdJgxJlEtkUjkB4PBB+1N07QIwjmvLxYLczabjRVFuR6NRp+kdzqdr3K53Nuw9sC2bbc0Tbv3iyadTkdzuVxB1/Vn0jVNe6jVaut9v9+32u22eRA8n89boVDoxg88mUzqwWCQkSYIAkRRjNq2PV6tVnAcxwyHw5WDYMuy3iRJujvUzGKxGPXTGo3G2F3fi+IvMLmeTqe95XKJQCCwZsXj8TxjzGPGA6bGJZPJTCQS2T5p191wOHyMxWJP7rphGC+yLHv64vlu5LZarVZ2n+WGbHKmjClbWpS1KIruvqy/278NyGakZQAnR07gdqR/AfaxlNWnCI7OAAAAAElFTkSuQmCC');background-repeat:none;cursor:pointer" onclick="location.href='https://yaw.ee'"></i>
            </div>
        </div>
    </div>
</div>
```

js部分：
```
<script src="https://lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function () {
        var ads = [];
        ads[1] = {
            title: "周艳伟个人博客",
            href: "https://yaw.ee",
            class: "yawee-text-blue yawee-text-b",
            expdate: "2019-08-19"
        }
        ads[5] = {
            title: "周艳伟个人博客",
            href: "https://yaw.ee",
            class: "yawee-text-red",
            expdate: "2119-07-13"
        }
        ads[8] = {
            title: "周艳伟个人博客",
            href: "https://yaw.ee",
            class: "yawee-text-yellow",
            expdate: "2119-07-13"
        }
        var h = 2,
            l = 5,
            html = '';
        for (var j = 0; j < h; j++) {
            html += '<tr>';
            for (var i = 0; i < l; i++) {
                html += '<td style="width:' + (100 / l) + '%;padding:3px 2px 3px 12px"><div class="yawee-text-nowrap" style="max-width:234px;overflow:hidden">';
                var d = j * l + i + 1;
                var o = ads[d];
                var f = true;
                if (typeof o != "undefined") {
                    var nowtime = (new Date()).getTime();
                    var exptime = Date.parse(new Date(o.expdate));
                    if (nowtime < exptime) {
                        if (o.html) {
                            html += o.html;
                        } else {
                            html += '<a target="_blank" href="' + o.href + '" class="' + o.class + ' yawee-hover-underline">' + o.title + '</a>';
                        }
                        f = false;
                    }
                }
                if (f) {
                    html += '<a target="_blank" href="https://yaw.ee" class="yawee-hover-underline" title="广告位有空，点击查看详情" style="color:#777">AD' + (d < 10 ? '0' + d : d) + '虚位以待</a>';
                }
                html += '</div></td>';
            }
            html += '</tr>';
        }
        $('#_adbox').removeClass('yawee-hide').find('table').append(html);
    });
</script>
```

最后修改：2019 年 10 月 30 日 05 : 44 PM

如果觉得我的文章对你有用，请随意赞赏