利用js setInterval() 实现信息的定时显示与隐藏

利用JS setInterval()函数编写公告信息的定时显示与隐藏。

效果图：

html代码：

<script>
   var orders = ['恭喜【北京的赵东**】6秒前下单成功','恭喜【新疆的钱**】9秒前下单成功','恭喜【哈尔的滨孙**】3秒前下单成功','恭喜【武汉的夏**】5秒前下单成功'];
   order_note(orders);
 </script>
<div class="order_note"><img src="xlb.png"><span id="note_box">恭喜【苏州李*豪】1秒前下单成功</span></div>

小喇叭图片（xlb.png）自己寻找，小编没给图片。

css代码：

.order_note{
    position:absolute;
    width:300px;
    height:30px;
    line-height:30px;
    border-radius:5px;
    color:#FFFFFF;
    font-size:14px;
    top:12px;
    left:12px;
    background-color: rgba(0,0,0,0.7);
    text-align: left;
    padding-left: 10px;
}
.order_note img{
    width: 26px;
    margin-bottom: -9px;
}
.order_note span{
    margin-left: 10px;
}

jquery代码：

/**
 * 定时显示信息 infos 显示信息数组
 */
function order_note(infos) {
    setInterval(function () {
        info = infos.pop();
        $('.order_note').hide().delay(4000).show(0);
        $("#note_box").text(order_info);
    }, 8000);
}

本文原创，转载请附带地址：http://www.bjcxy.club/article/jquery-setinterval-info/