用心做好每一件事情！

HTML 滚动显示数据

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="webtest.aspx.cs" Inherits="Dashboard.webtest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
        .tablebox
        {
            height: 100%; /*overflow: hidden;*/
            position: relative;
            width: 100%;
            margin: -10px auto;
            background-color: rgba(6,26,103,1);
        }
        .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
        {
            font-size: 24px;
            color: white;
            line-height: 45px;
            text-align: center;
        }
        
        .tablebox table td
        {
            font-size: 24px;
            color: black;
            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>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.2/jquery.min.js"></script>
</head>
<body>
    <div class="tablebox">
        <div class="tbl-header">
            <table border="0" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th align="center">
                            产品名称
                        </th>
                        <th align="center">
                            工单号码
                        </th>
                        <th>
                            工单数量
                        </th>
                        <th align="center">
                            工序名称
                        </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 align="center">
                            产品名称
                        </th>
                        <th align="center">
                            工单号码
                        </th>
                        <th>
                            工单数量
                        </th>
                        <th align="center">
                            工序名称
                        </th>
                        <th>
                            已通过良品数
                        </th>
                        <th>
                            不良数量
                        </th>
                        <th>
                            维修数量
                        </th>
                        <th>
                            完成率
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            setInterval(function () {
                location.reload();
            }, 6000000);

        });



        var MyMarhq = '';
        clearInterval(MyMarhq);
        $('.tbl-body tbody').empty();
        $('.tbl-header tbody').empty();
        var str = '';
        var Items = "";

        $.ajax({
            type: "post",
            cache: false,
            async: false,
            url: "webtest.aspx?Oper=load_list&key=" + Math.random(),
            dataType: "json",
            success: function (data) {
                Items = data;
            }
        });



        $.each(Items, function (i, item) {
            str = '<tr>' +
        '<td>' + item.PRODUCT_NAME + '</td>' +
        '<td>' + item.LOT_NAME + '</td>' +
        '<td>' + item.QUANTITY + '</td>' +
        '<td>' + item.STEP_NAME + '</td>' +
        '<td>' + item.PASS_QTY + '</td>' +
        '<td>' + item.FAIL_QTY + '</td>' +
        '<td>' + item.REPAIR_QTY + '</td>' +
        '<td>' + item.RATE + '%</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);
            })

        }
    </script>
</body>
</html>
复制代码

 

posted @   无 影  阅读(1705)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
历史上的今天：
2012-12-25 (源码)WinForm TextBox 实现自动索引功能
作者： Allen【QQ:96966 1314】 网名：无影 出处： http://www.cnblogs.com/allen0118/ 声明： 本文版权归作者和博客园共有！转载时必须保留此段声明，且在文章页面明显位置给出原文连接。
点击右上角即可分享
微信分享提示
AI IDE Trae