直播带货系统，实现直播间人数统计

实现直播带货系统直播间的上下滚动人数计数器：

css：

.sdvm_num{! font-size: 14px;color:red;display:inline-block;vertical-align:middle;margin-left:8px;}
.sdvm_num i{width:70px;height:52px;display:inline-block;background:url(../images/number1.png) no-repeat;background-position:0 0;margin:0 5px;}

HTML：

<span class="sdvm_num"><!-- <i style="background-position: 0px -312px;"></i> --><i style="background-position: 0px 0px;"></i><i style="background-position: 0px 0px;"></i><i style="background-position: 0px 0px;"></i><i style="background-position: 0px 0px;"></i><i style="background-position: 0px 0px;"></i><i style="background-position: 0px 0px;"></i><i style="background-position: 0px 0px;"></i>
</span>

js：

window.sum=500;
setInterval(function(){for (var i = 0; i < sum.toString().length; i++) {if (sum.toString().length<7) {sum='0'+sum;}}show_num1(sum)
},2000);
function show_num1(n) {sum=Number(sum)+3;var it = $(".sdvm_num i");var len = String(n).length;for(var i = 0; i < len; i++) {// $('.sdvm_nums').hide();if(it.length <= i) {$(".sdvm_num").append("<i></i>");}var num = String(n).charAt(i);//根据数字图片的高度设置相应的值var y = -parseInt(num) * 52;var obj = $(".sdvm_num i").eq(i);obj.animate({backgroundPosition: '(0 ' + String(y) + 'px)'}, 'slow', 'swing', function() {});}// $("#cur_num").val(n);
}

图片：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAIICAYAAADT45ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAI22lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wOC0xNVQxMDoxNzo0MyswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDgtMTVUMTY6MjM6NTUrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDgtMTVUMTY6MjM6NTUrMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NWZiNzZkZmMtODFkNC02YzRkLTllNmMtMGEzZGRkNDM2NjNlIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MDZjMDI2NTAtMDk0MC01MzQ1LTlmZTMtMTI5MTU5Njk2ODQ1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZWYwNjg4NWYtNGI2Mi04ZTQwLWJmNzUtMDNjNWQ1M2ZiZTEyIj4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSIwIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSIwIi8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iMSIgcGhvdG9zaG9wOkxheWVyVGV4dD0iMSIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IjIiIHBob3Rvc2hvcDpMYXllclRleHQ9IjIiLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSIzIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSIzIi8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iNCIgcGhvdG9zaG9wOkxheWVyVGV4dD0iNCIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IjUiIHBob3Rvc2hvcDpMYXllclRleHQ9IjUiLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSI2IiBwaG90b3Nob3A6TGF5ZXJUZXh0PSI2Ii8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iNyIgcGhvdG9zaG9wOkxheWVyVGV4dD0iNyIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IjgiIHBob3Rvc2hvcDpMYXllclRleHQ9IjgiLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSI5IiBwaG90b3Nob3A6TGF5ZXJUZXh0PSI5Ii8+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6VGV4dExheWVycz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlp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