利用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/

如有wordpress博客开发,wordpress开发,网站建设,手机网站建设,微信公众号开发,微信小程序开发,请联系我们!

QQ:598887907 微信:北漂的程序猿-微信号

发表评论

电子邮件地址不会被公开。 必填项已用*标注