电子看板代码

yanmingeye

浏览: 111351 次
性别:
来自: 江西

最近访客更多访客>>

kopxcp

yaoye529

suzhouclark

dingdang_j

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

电子看板钟艳明

<!doctype html>
<html>
<head>
<title>昇沪销售金额看板</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="myjs.js"></script>
<style>
.tablebox {
    height: 1000px;
    overflow: hidden;
    position: relative;
    width: 1500px;
    margin: 10px auto;
    background-color: rgba(6,26,103,1);
}
.tabTitle{
	font-size: 32px;
	margin: 0px auto;
    color:red;
    background-color: #1f1f9c;
    background-color: rgba(6,26,103,1);
    width:1000px;
    height:100px;
    line-height: 100px;
    text-align: center;
}
.tbl-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.tbl-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.tablebox table {
    width: 100%;
}

.tablebox table th,
.tablebox table td {
    font-size: 24px;
    color: #7ca6f4;
    line-height: 45px;
    text-align: center;
}

.tablebox table tr th {
    background-color: #1f1f9c;
    cursor: pointer;
}

.tablebox table tr td {
    background-color: transparent;
}

.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
    background-color: rgba(31, 31, 156, .5);
}

.tablebox table tr td span,
.tablebox table tr td span {
    font-size: 24px;
}</style>
</head>
<body onload="orderGetlist();">
 <div class="tabTitle" id="text1">惠州市昇沪汽车紧固件科技公司[客服中心]--销售未交状况表</div>
<div class="tablebox" id="content">
        <div class="tbl-header">
            <table border="0" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                    	<th>序号</th>
                        <th>跟单员</th>
                        <th>订单交期</th>
                        <th>订单号码</th>
                        <th>物料料号</th>
                        <th>订单数量</th>
                        <th>已发数量</th>
                        <th>未发数量</th>
                    </tr>
                </thead>
                <tbody style="opacity:0;"></tbody>
            </table>
        </div>
        
        <div class="tbl-body">
            <table border="0" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                    	<th>序号</th>
                        <th>跟单员</th>
                        <th>订单交期</th>
                        <th>订单号码</th>
                        <th>物料料号</th>
                        <th>订单数量</th>
                        <th>已发数量</th>
                        <th>未发数量</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

<script>
function drawlist(rtext)
{
	
	var MyMarhq = '';
	clearInterval(MyMarhq);
	$('.tbl-body tbody').empty();
	$('.tbl-header tbody').empty();
	var str ='';
	var Items = eval(rtext);
	//document.getElementById("text1").innerHTML=rtext;
	$.each(Items,function (i, item) {
	    str = '<tr>'+
	    	'<td>'+item.sno+'</td>'+
	        '<td>'+item.gdName+'</td>'+
	        '<td>'+item.deliveryDate+'</td>'+
	        '<td>'+item.orderno+'</td>'+
	        '<td>'+item.mcode+'</td>'+
	        '<td>'+(+item.qty).toFixed(2)+'</td>'+
	        '<td>'+(+item.outQty).toFixed(2)+'</td>'+
	        '<td>'+(+item.leftQty).toFixed(2)+'</td>'+
	        '</tr>'

	    $('.tbl-body tbody').append(str);
	    $('.tbl-header tbody').append(str);
	});

	if(Items.length > 10){
	    $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
	    $('.tbl-body').css('top', '0');
	    var tblTop = 0;
	    var speedhq = 50; // 数值越大越慢
	    var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
	    function Marqueehq(){
	        if(tblTop <= -outerHeight*Items.length){
	            tblTop = 0;
	        } else {
	            tblTop -= 1;
	        }
	        $('.tbl-body').css('top', tblTop+'px');
	    }
	    MyMarhq = setInterval(Marqueehq,speedhq);
	    // 鼠标移上去取消事件
	    $(".tbl-header tbody").hover(function (){
	        clearInterval(MyMarhq);
	    },function (){
	        clearInterval(MyMarhq);
	        MyMarhq = setInterval(Marqueehq,speedhq);
	    })

	}
}

var xmlHttpRequest = null;
function orderGetlist() {
	    //创建XMLHttpRequest对象，为考虑兼容性问题，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
		if (window.XMLHttpRequest)
		{
			xmlHttpRequest = new XMLHttpRequest();
		}
		else 
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//设定请求的类型，服务器URL，以及是否异步处理
		xmlHttpRequest.open("POST","http://localhost:8080/shitteam/SaOrderServlet",true);
		xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xmlHttpRequest.onreadystatechange=function()
		{
		    //4:请求已完成，且响应已就绪    
		    if(xmlHttpRequest.readyState==4)
		    {
		    	//alert("here！");
		        //200:成功
		        if(xmlHttpRequest.status==200)
		        {
		        	
		        	var xmltext = xmlHttpRequest.responseText;
		        	drawlist(xmltext);
		        }else
		        {
		        	alert("AJAX服务器返回错误！");
		        }
		    }
	 }
	//将请求发送到服务器
	xmlHttpRequest.send();
}
</script>
 
</body>
</html>

分享到：