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