前端,前端。。。

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <title>东裕</title>
    <link rel="stylesheet" href="css/douyu.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <!--<link type="text/css" rel="stylesheet" href="css/css.css">-->
    <script src="jquery-2.1.1.min.js"></script>
    <!--<script src="index.js"></script>-->
</head>
<body>
    <div class="main">
        <div class="split" style="74.5%;">
            <!--==========================================大图轮播====================-->
            <div style="height:100%;100%;position:relative;">

                <ul id="pictures">
                    <!--<li><div style="height:100%;100%;position:relative"><iframe id="src1" frameborder="0" scrolling="no" src="" class="pic"></iframe></div></li>
                    <li style="list-style:none"><iframe id="src2" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src3" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src4" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src5" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src6" frameborder="0" scrolling="no" src="img/1.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src7" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src8" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src9" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src10" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>-->
                    <!--<li><img id="src1" src="img/1.jpg" class="picfixed"/></li>
                    <li><img id="src2"  src="img/2.jpg" class="picfixed"/></li>
                    <li><img id="src3"src="img/3.jpg" class="picfixed"/></li>
                    <li><img id="src4" src="img/4.jpg" class="picfixed"/></li>
                    <li><img id="src5"  src="img/5.jpg" class="picfixed"/></li>
                    <li><img id="src6" src="img/1.jpg" class="picfixed"/></li>
                    <li><img id="src7"  src="img/2.jpg" class="picfixed"/></li>
                    <li><img id="src8" src="img/3.jpg" class="picfixed"/></li>
                    <li><img id="src9"  src="img/4.jpg" class="picfixed"/></li>
                    <li><img id="src10"  src="img/5.jpg" class="picfixed"/></li>-->
                </ul>

            </div>

            <!--============================================================-->
        </div>
        <div class="split" style="0.5%;"></div>
        <div class="split" style="25%;">
            <!--=========================================================================================================================-->
            <div class="rightsplit " style="height:40%;">
                <form id="form1" runat="server" class="form">
                    <table style="100%;text-align:center;height:100%;position:relative;">
                        <tr class="tr">
                            <td class="td white">品名</td>
                            <td class="td white">前班产量</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="pinming"></td>
                            <td class="td green" id="qianbanchanliang"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">料号</td>
                            <td class="td white">当班产量</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="liaohao"></td>
                            <td class="td green" id="dangbanchanliang"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">工单号</td>
                            <td class="td white">理论周期</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="gongdanhao"></td>
                            <td class="td green" id="lilunzhouqi"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">开始时间</td>
                            <td class="td white">实际周期</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="kaishishijian"></td>
                            <td class="td green" id="shijizhouqi"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">订单量</td>
                            <td class="td white">不良数</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="dingdanliang"></td>
                            <td class="td green" id="buliangshu"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">已完成量</td>
                            <td class="td white">不良率</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="yiwanchengliang"></td>
                            <td class="td green" id="bulianglv"></td>
                        </tr>
                    </table>
                </form>
            </div>

            <div class="rightsplit green" style="height:60%;">
                <div class="buliangpintongji ">不良品统计</div>
                <div style="100%;height:90%;position:relative;">
                    <form id="form1" runat="server" class="form">
                        <table style="100%;text-align:center;height:100%;position:relative;vertical-align:central;">
                            <tr class="trx green border">

                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id1" class="iddiv"></div>
                                            <div id="name1" class="namediv"></div>
                                        </div>
                                        <div id="value1" class="countdiv" style=""></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id10" class="iddiv"></div>
                                            <div id="name10" class="namediv"></div>
                                        </div>
                                        <div id="value10" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id19" class="iddiv"></div>
                                            <div id="name19" class="namediv"></div>
                                        </div>
                                        <div id="value19" class="countdiv"></div>
                                    </div>
                                </td>

                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id2" class="iddiv"></div>
                                            <div id="name2" class="namediv"></div>
                                        </div>
                                        <div id="value2" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id11" class="iddiv"></div>
                                            <div id="name11" class="namediv"></div>
                                        </div>
                                        <div id="value11" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id20" class="iddiv"></div>
                                            <div id="name20" class="namediv"></div>
                                        </div>
                                        <div id="value20" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id3" class="iddiv"></div>
                                            <div id="name3" class="namediv"></div>
                                        </div>
                                        <div id="value3" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id12" class="iddiv"></div>
                                            <div id="name12" class="namediv"></div>
                                        </div>
                                        <div id="value12" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id21" class="iddiv"></div>
                                            <div id="name21" class="namediv"></div>
                                        </div>
                                        <div id="value21" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id4" class="iddiv"></div>
                                            <div id="name4" class="namediv"></div>
                                        </div>
                                        <div id="value4" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id13" class="iddiv"></div>
                                            <div id="name13" class="namediv"></div>
                                        </div>
                                        <div id="value13" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id22" class="iddiv"></div>
                                            <div id="name22" class="namediv"></div>
                                        </div>
                                        <div id="value22" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id5" class="iddiv"></div>
                                            <div id="name5" class="namediv"></div>
                                        </div>
                                        <div id="value5" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id14" class="iddiv"></div>
                                            <div id="name14" class="namediv"></div>
                                        </div>
                                        <div id="value14" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id23" class="iddiv"></div>
                                            <div id="name23" class="namediv"></div>
                                        </div>
                                        <div id="value23" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id6" class="iddiv"></div>
                                            <div id="name6" class="namediv"></div>
                                        </div>
                                        <div id="value6" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id15" class="iddiv"></div>
                                            <div id="name15" class="namediv"></div>
                                        </div>
                                        <div id="value15" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id24" class="iddiv"></div>
                                            <div id="name24" class="namediv"></div>
                                        </div>
                                        <div id="value24" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id7" class="iddiv"></div>
                                            <div id="name7" class="namediv"></div>
                                        </div>
                                        <div id="value7" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id16" class="iddiv"></div>
                                            <div id="name16" class="namediv"></div>
                                        </div>
                                        <div id="value16" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id25" class="iddiv"></div>
                                            <div id="name25" class="namediv"></div>
                                        </div>
                                        <div id="value25" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id8" class="iddiv"></div>
                                            <div id="name8" class="namediv"></div>
                                        </div>
                                        <div id="value8" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id17" class="iddiv"></div>
                                            <div id="name17" class="namediv"></div>
                                        </div>
                                        <div id="value17" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="div1 "></div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id9" class="iddiv"></div>
                                            <div id="name9" class="namediv"></div>
                                        </div>
                                        <div id="value9" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id18" class="iddiv"></div>
                                            <div id="name18" class="namediv"></div>
                                        </div>
                                        <div id="value18" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="div1 "></div>
                                </td>
                            </tr>
                        </table>
                    </form>

                </div>
            </div>

            <!--===============================-->
            <!--===================================-->
        </div>
    </div>
    <script type="text/javascript">
        //================================键盘操作方法=======================
        init();
        var checked = 0;
        var countresult = 0;
        var keyCode = 0;
        var keyCodeArry = [];
        var numArry = [];
        var planid = 0;
        var postbadproid = 0;
        var postbadpronum = 0;
        var result = 0;
        var srcarr = [];
        var countdelcode = 0;
        var manualPlayindex = 0;
        //var value1 = document.getElementById("value1");
        //var value2 = document.getElementById("value2");
        //var value3 = document.getElementById("value3");
        //var value4 = document.getElementById("value4");
        //var value5 = document.getElementById("value5");
        //var value6 = document.getElementById("value6");
        //var value7 = document.getElementById("value7");
        //var value8 = document.getElementById("value8");
        //var value9 = document.getElementById("value9");
        //var value10 = document.getElementById("value10");
        //var value11 = document.getElementById("value11");
        //var value12 = document.getElementById("value12");
        //var value13 = document.getElementById("value13");
        //var value14 = document.getElementById("value14");
        //var value15 = document.getElementById("value15");
        //var value16 = document.getElementById("value16");
        //var value17 = document.getElementById("value17");
        //var value18 = document.getElementById("value18");
        //var value19 = document.getElementById("value19");
        //var value20 = document.getElementById("value20");
        //var value21 = document.getElementById("value21");
        //var value22 = document.getElementById("value22");
        //var value23 = document.getElementById("value23");
        //var value24 = document.getElementById("value24");
        //var value25 = document.getElementById("value25");

        //keydown调用的方法
        document.onkeydown = function (ev) {
            var oEvent = ev || event;
            keyCode = oEvent.keyCode;
            keyCodeArry = addKeyCodeArry(keyCode, keyCodeArry);
            if (keyCode == 106)
            {
                transform();
                updatebadreason();
                window.location.reload()
            }
          
            if (keyCode == 100 || keyCode == 102)
            {
              
                manualPlay("pictures", "li", keyCode);
            }
            enter();
        }
        //keyup调用的方法
        document.onkeyup = function (ev) {
            var oEvent = ev || event;
            keyCode = oEvent.keyCode;
            keyCodeArry = deleteKeyCodeArry(keyCode, keyCodeArry);
        }
        function addKeyCodeArry(num, arr) {
            arr = keyCodeArry;
            //var check = 0;
            //for (var i = 0; i < arr.length; i++) {
            //    if (arr[i] == num) {
            //        check = 1;
            //    }
            //}
            //if (check == 0) {
                arr.push(num);
            //}
            return arr;
        }
        function deleteKeyCodeArry(num, arr) {

            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == 111) {
                    arr = [];
                    window.location.reload()
                }
            }
            return arr
        }
        //===========================================================
        //===============通过按+或-键来计算不良品数量==============
        function count(num) {
            var content = "";
            if (num == 110) {
                content = checked;
            }
            if (num == 107) {
                countresult = countresult + 1;
                content = countresult;
            }
            if (num == 109) {
                if (countresult > 0) {
                    countresult = countresult - 1;
                }
                else {
                    countresult = 0;
                }
                content = countresult;
            }

            return content;
        }
        //=================通过按+或-键来计算不良品数量===============
        //==============删除高亮显示=================
        function removecss(id)//要改变css样式div的id
        {
            id.addClass('nogaoliang');
        }
        //============删除高亮显示=====================
        //=============按*键调用的方法=====================
        function transform() {

            if (keyCodeArry[1] == 110) {
                numKeycode = keyCodeArry[0];
                if (numKeycode == 97) { // 按 1
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value1'));
                }
                if (numKeycode == 98) { // 按 2
                    postbadproid = id2.innerText;
                    postbadpronum = value2.innerText;
                    removecss($('#value2'));
                }
                if (numKeycode == 99) { // 3 键
                    postbadproid = id3.innerText;
                    postbadpronum = value3.innerText;
                    removecss($('#value3'));
                }
              
                if (numKeycode == 101) { // 5键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value5'));
                }
               
                if (numKeycode == 103) { // 7 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value7'));
                }

                if (numKeycode == 104) { // 8键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value8'));
                }
                if (numKeycode == 105) { // 9 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value9'));
                }
            }
            if (keyCodeArry[2] == 110) {
                numKeycode = keyCodeArry[0]
                numKeycode1 = keyCodeArry[1]
                if (numKeycode == 99 && numKeycode1 == 107) { // 4 键  3和+
                    postbadproid = id4.innerText;
                    postbadpronum = value4.innerText;
                    removecss($('#value4'));
                }
                if (numKeycode == 101 && numKeycode1 == 107) { // 6键  5和+
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value6'));
                }
                if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value10'));
                }
                if (numKeycode == 97 && numKeycode1 == 97) {// 11 键 
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value11'));
                }
                if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value12'));
                }
                if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value13'));
                }
                if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value14'));
                }
                if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value15'));
                }
                if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value16'));
                }
                if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value17'));
                }
                if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value18'));
                }
                if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value19'));
                }
                if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value20'));
                }
                if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value21'));
                }
                if (numKeycode == 98 && numKeycode1 == 98) {// 22 键 
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value22'));
                }
                if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value23'));
                }
                if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value24'));
                }
                if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value25'));
                }
            }


        }
        //=================按*键调用的方法=====================
        //===================添加高亮显示================================
        function addcss(id)//要改变css样式div的id
        {
            id.addClass('gaoliang');
        }
        //===============添加高亮显示====================
        //============按.键调用的方法======================
        function enter() {

            if (keyCodeArry[1] == 110) {
                numKeycode = keyCodeArry[0];
                if (numKeycode == 97) { // 按 1
                    value1.innerText = count(keyCode);
                    addcss($('#value1'));
                }
                if (numKeycode == 98) { // 按 2
                    value2.innerText = count(keyCode);
                    addcss($('#value2'));
                }
                if (numKeycode == 99) { // 3 键
                    value3.innerText = count(keyCode);
                    addcss($('#value3'));
                }
              
                if (numKeycode == 101) { // 5键
                    value5.innerText = count(keyCode);
                    addcss($('#value5'));
                }
              
                if (numKeycode == 103) { // 7 键
                    value7.innerText = count(keyCode);
                    addcss($('#value7'));
                }

                if (numKeycode == 104) { // 8键
                    value8.innerText = count(keyCode);
                    addcss($('#value8'));
                }
                if (numKeycode == 105) { // 9 键
                    value9.innerText = count(keyCode);
                    addcss($('#value9'));
                }
            }
            if (keyCodeArry[2] == 110) {
                numKeycode = keyCodeArry[0]
                numKeycode1 = keyCodeArry[1]
                if (numKeycode == 99 && numKeycode1 == 107)
                { // 4 键 3和+
                    value4.innerText = count(keyCode);
                    addcss($('#value4'));
                }
                if (numKeycode == 101 && numKeycode1 == 107)
                { // 6键  5和+
                    value6.innerText = count(keyCode);
                    addcss($('#value6'));
                }
                if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                    value10.innerText = count(keyCode);
                    addcss($('#value10'));
                }
                if (numKeycode == 97 && numKeycode1 == 97) {// 11 键 
                    value11.innerText = count(keyCode);
                    addcss($('#value11'));
                }
                if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                    value12.innerText = count(keyCode);
                    addcss($('#value12'));
                }
                if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                    value13.innerText = count(keyCode);
                    addcss($('#value13'));
                }
                if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                    value14.innerText = count(keyCode);
                    addcss($('#value14'));
                }
                if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                    value15.innerText = count(keyCode);
                    addcss($('#value15'));
                }
                if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                    value16.innerText = count(keyCode);
                    addcss($('#value16'));
                }
                if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                    value17.innerText = count(keyCode);
                    addcss($('#value17'));
                }
                if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                    value18.innerText = count(keyCode);
                    addcss($('#value18'));
                }
                if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                    value19.innerText = count(keyCode);
                    addcss($('#value19'));
                }
                if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                    value20.innerText = count(keyCode);
                    addcss($('#value20'));
                }
                if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                    value21.innerText = count(keyCode);
                    addcss($('#value21'));
                }
                if (numKeycode == 98 && numKeycode1 == 98) {// 22 键  
                    value22.innerText = count(keyCode);
                    addcss($('#value22'));
                }
                if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                    value23.innerText = count(keyCode);
                    addcss($('#value23'));
                }
                if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                    value24.innerText = count(keyCode);
                    addcss($('#value24'));
                }
                if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                    value25.innerText = count(keyCode);
                    addcss($('#value25'));
                }
            }
        }
        //===============按.键调用的方法========================

        //==============页面加载时调用的方法==================
        function init() {

            loadinformation();
            //autoPlay("pictures", "li");
          
        }
        //================页面加载时调用的方法==================
        //data1 = data.josnObj.tsBadreasonrecs;
        //加载分享配置
        function loadinformation() {
            $.ajax({
                url: "http://192.168.21.230:8081/tsplan/getSopByEquId?equId=1057743339643867248",
                timeout: 10000, //超时时间设置,单位毫秒
                type: 'GET',
                data: {},
                dataType: "json",
                cache: false,
                error: erryFunction,  //错误执行方法
                success: succFunction //成功执行方法

            });
        }
        function updatebadreason() {

            $.ajax({
                //url: "http://192.168.21.230:8081/tsinspection/addSopBadRec? planId =" + planid + "& badproId=" + postbadproid + "& badproNum=" + postbadpronum,
                url: "http://192.168.21.230:8081/tsinspection/addSopBadRec/", 
                type: 'POST', 
                data: { planId: planid, badproId: postbadproid, badproNum: postbadpronum }, 
                dataType: "json", 
                success: function (msg)
                {
                    alert("提交成功!!");
                },
                error: erryFunction//错误执行方法
                
            });
        }
        function erryFunction(msg) {
            alert("失败");
        }
     
        function succFunction(data) {

            //var json = eval(data); //数组
            var jsonbadreasonlist = data.josnObj.tsBadreasonrecs;//获取的数组
            var jsontsPlan = data.josnObj.tsPlan;
            var jsonobj = data.josnObj;
            var getsoplist = data.josnObj.sopList;
            var jsonpiclist = [];
            var piclist = [];
            var imgfile = "";
            var reletiveurl = "";
            pinming.innerText = jsontsPlan.productName;
            qianbanchanliang.innerText = jsonobj.beforeshiftsTotal;
            liaohao.innerText = jsontsPlan.productCode;
            dangbanchanliang.innerText = jsonobj.shiftsTotal;
            gongdanhao.innerText = jsontsPlan.planNum;
            lilunzhouqi.innerText = jsonobj.standCycle;
            kaishishijian.innerText = jsontsPlan.beginDate;
            shijizhouqi.innerText = jsontsPlan.cycletime;
            dingdanliang.innerText = jsontsPlan.planCount;
            buliangshu.innerText = jsontsPlan.badproTotal;
            yiwanchengliang.innerText = jsontsPlan.proTotal;
            bulianglv.innerText = (jsontsPlan.badproTotal / jsontsPlan.proTotal).toFixed(2);
            planid = jsontsPlan.planId;//要传给后台的planid

            $.each(getsoplist, function (index, item)
            {
                
               
                $.each(getsoplist[index], function (index1, item)
                {
                    piclist.push(getsoplist[index][index1].soppath);
                });
       
            });
            $.each(jsonpiclist, function (index, item)
            {
                if (jsonpiclist[index].soppath != null && jsonpiclist[index].soppath != "")
                { 
                    piclist.push(jsonpiclist[index]);
                }
               
            });

            $.each(piclist, function (index, item)
            {
                imgfile = "http://192.168.21.230:8081/" + piclist[index];
                reletiveurl = piclist[index]
                showFile(imgfile, reletiveurl);
                //alert(imgfile);
            });
          
            $.each(jsonbadreasonlist, function (index, item)
            {

                //循环获取数据
                var id = jsonbadreasonlist[index].badproId;
                var name = jsonbadreasonlist[index].badreason;
                var num = jsonbadreasonlist[index].badproNum;

                if (id == 1) {
                    value1.innerText = num;
                    id1.innerText = id;
                    name1.innerText = name;

                }
                if (id == 2) {
                    value2.innerText = num;
                    id2.innerText = id;
                    name2.innerText = name;
                }
                if (id == 3) {
                    value3.innerText = num;
                    id3.innerText = id;
                    name3.innerText = name;
                }
                if (id == 4) {
                    value4.innerText = num;
                    id4.innerText = id;
                    name4.innerText = name;
                }
                if (id == 5) {
                    value5.innerText = num;
                    id5.innerText = id;
                    name5.innerText = name;
                }
                if (id == 6) {
                    value6.innerText = num;
                    id6.innerText = id;
                    name6.innerText = name;
                }
                if (id == 7) {
                    value7.innerText = num;
                    id7.innerText = id;
                    name7.innerText = name;
                }
                if (id == 8) {
                    value8.innerText = num;
                    id8.innerText = id;
                    name8.innerText = name;
                }
                if (id == 9) {
                    value9.innerText = num;
                    id9.innerText = id;
                    name9.innerText = name;
                }
                if (id == 10) {
                    value10.innerText = num;
                    id10.innerText = id;
                    name10.innerText = name;
                }
                if (id == 11) {
                    value11.innerText = num;
                    id11.innerText = id;
                    name11.innerText = name;
                }
                if (id == 12) {
                    value12.innerText = num;
                    id12.innerText = id;
                    name12.innerText = name;
                }
                if (id == 13) {
                    value13.innerText = num;
                    id13.innerText = id;
                    name13.innerText = name;
                }
                if (id == 14) {
                    value14.innerText = num;
                    id14.innerText = id;
                    name14.innerText = name;
                }
                if (id == 15) {
                    value15.innerText = num;
                    id15.innerText = id;
                    name15.innerText = name;
                }
                if (id == 16) {
                    value16.innerText = num;
                    id16.innerText = id;
                    name16.innerText = name;
                }
                if (id == 17) {
                    value17.innerText = num;
                    id17.innerText = id;
                    name17.innerText = name;
                }
                if (id == 18) {
                    value18.innerText = num;
                    id18.innerText = id;
                    name18.innerText = name;
                }
                if (id == 19) {
                    value19.innerText = num;
                    id19.innerText = id;
                    name19.innerText = name;
                }
                if (id == 20) {
                    value20.innerText = num;
                    id20.innerText = id;
                    name20.innerText = name;
                }
                if (id == 21) {
                    value21.innerText = num;
                    id21.innerText = id;
                    name21.innerText = name;
                }
                if (id == 22) {
                    value22.innerText = num;
                    id22.innerText = id;
                    name22.innerText = name;
                }
                if (id == 23) {
                    value23.innerText = num;
                    id23.innerText = id;
                    name23.innerText = name;
                }
                if (id == 24) {
                    value24.innerText = num;
                    id24.innerText = id;
                    name24.innerText = name;
                }
                if (id == 25) {
                    value25.innerText = num;
                    id25.innerText = id;
                    name25.innerText = name;
                }
            });
        }


      
        //=============大图自动轮播===============
        function autoPlay(parentID, childTag) {
            $(document).ready(function () {
                //循环执行,每隔1秒钟执行一次 1000 
                var t1 = window.setInterval(refreshCount, 1000);

                function refreshCount() {
                    console.log("ready");
                }

                //去掉定时器的方法  
                //window.clearInterval(t1);
            }); 
            var pictures = document.getElementById(parentID);
            var items = pictures.getElementsByTagName(childTag);
            var len = items.length;
            var index = 0;
            showItem();
            // 显示一张图片
            function showItem() {
                // 首先将所有图片透明度设为0
                hideItems();
                items[index].style.opacity = 1;
                //items[index].css("opacity", "1");
                // 将要显示的透明度改变让其显示

                if (index > len - 2) {
                    index = 0;
                }
                else {
                    index++;
                }

                // 在这里用setTimeout模拟setInterval的效果
                setTimeout(showItem, 15000);
            }
            // 将所有图片透明度设为0
            function hideItems(parentID, childTag) {
                for (var i = 0; i < len; i++) {
                    items[i].style.opacity = 0;
                  
                }

            }

        };
        //=================大图自动轮播=================
        //================================手动切换图片===================
        function manualPlay(parentID, childTag, keynum)
        {
            
            var pictures = document.getElementById(parentID);

            var items = pictures.getElementsByTagName(childTag);
            var len = items.length;
            //alert(len);
            showItem();
            // 显示一张图片
            function showItem()
            {
                // 首先将所有图片透明度设为0
                hideItems();
                //items[2].style.opacity = 1;
                // 将要显示的透明度改变让其显示
               
                if (keynum == 102)  //增加  6键
                {
                    if (manualPlayindex > len - 2)
                    {
                        //alert("请按“-”号继续查看上图");
                        manualPlayindex = 0;
                    }
                    else
                    {
                        manualPlayindex++;
                    }
                }
                if (keynum == 100)   /*减少  4键*/
                {
                    if (manualPlayindex < 1)
                    {
                        alert("请按键“6”继续查看下图");
                        manualPlayindex = 0;
                    }
                    else {
                        manualPlayindex--;
                    }
                }
              
                 items[manualPlayindex].style.opacity = 1;
            }
            // 将所有图片透明度设为0
            function hideItems(parentID, childTag) {
                for (var i = 0; i < len; i++) {
                    items[i].style.opacity = 0;

                }
            }
        };
        //===================手动切换图片=================

        //==================================================

        //================================================
        //=======================删除li元素========================
       
            //=======================删除li元素===================
        function showFile(file,reurl)
        {
            //var file = $(obj).attr("data-src");

            var arr = reurl.split('.');
            var name = arr[1];
            var img_infor = "";
            var ul = document.getElementById("pictures");
            var obj = document.createElement("li");
            if (name == "pdf")
            {
                //img_infor = ' <iframe frameBorder="0" scrolling="no" src="' +
                //    file + '" style="700px; height:800px;position: absolute;overflow:hidden; "></iframe>';
                img_infor = ' <div style="height:800px;900px;position:absolute"> <iframe frameBorder="0" scrolling="no" src="' +
                    file + '" style="1400px; height:1000px;position: absolute;overflow:hidden;"></iframe></div>';
               
            }
            else
            {
                img_infor = '<div style="height: 1020px;  1430px; position: absolute"><img  src="' + file + ' "style="700px; height:800px;position: absolute;overflow:hidden;"/></div>';
            }
          
            obj.innerHTML = img_infor;
            ul.appendChild(obj);
            $('ul li').css('list-style', 'none');

            $('ul li').css('opacity', '0');
            $('ul li:first-child').css('opacity', '1');

        }
    </script>
</body>



</html>
    html
{
    height: 100%
}

body
{
    min-height: 100%
}
ul
{
    -webkit-padding-start: 0px;
    /*-webkit-margin-before: 1em;
    -webkit-margin-after: 1em;*/
    -webkit-margin-start: 0px;
    /*-webkit-margin-end: 0px;*/
    /*-webkit-padding-start: 40px;*/
}
.main {
    /*1920px;
    height:1080px;*/
 
    height: 100%;
    100%;
    margin: 0 0.1rem;
    overflow: hidden;
}
html,
body 
{
    position: relative;
    height: 100%;
}
.split
{
    float: left;
  
    position: relative;
    height: 100%
}
.rightsplit 
{
     100%;
    position: relative;
}
.tr 
{
 
    height:8%;
    position: relative;
    
}
.td {
     50%;
    position: relative;
  
  font:600;
  font-size:large;
   
}
.white {
    background-color: #F8F8FF;
}
.green {
    background-color: #E0EEE0;
}
.trx {
 100%;
    height:10%;
    position: relative;
  
}

.tdx {
    height: 10%;
     33%;
    position: relative;
    font: 600;
    font-size: large;
}
.form
{
     100%;
    height: 100%;
    position: relative;
}
.pictureall {
     100%;
    height: 100%;
    position: relative;
}
.countdiv {
   
     30%;
    height: 70%;
    position: relative;
    float: left;
    border: 0.5px solid darkgrey;
    border-radius: 10px;
    padding: 10px 0px 0px 0px;
   
}
.iddiv {
    /*margin: 2% auto;*/
    /*background: darkcyan;*/
     40%;
    height: 100%;
    position: relative;
    float: left;
    padding: 15px 0px 0px 0px;
    /*line-height: 100px;*/

    /*background-color: aquamarine;*/

}
.namediv {
    /*margin: 2% auto;*/
    /*background: darkcyan;*/
     60%;
    height: 100%;
    position: relative;
    float: left;
    /*background-color: red;*/
    /*text-align: center;
    display: table-cell;
    vertical-align: middle;*/
    /*line-height: 100%;*/
    padding: 15px 0px 0px 0px;
   
}

.div1 
{
   position: relative;
    height: 100%;
     60%;
    float: left;
   
}

.vertical 
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.buliangpintongji {
     100%;
    height: 10%;
    position: relative;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    vertical-align: middle;
    line-height: 100%;
   
    padding: 15px 0px 0px 0px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: darkgrey;
    border- 0.8px;
   /*background-color:aqua;*/
}

.tddiv {
    height: 100%;
     98%;
    position: relative;
    border-right-style: solid;
    /*border-bottom-style: solid;*/
    border-color: darkgrey;
    border- 0.8px;
    /*background-color:red;*/


}
.gaoliang {
   
    /*border-radius: 10px;*/
    -webkit-box-shadow: 0 0 5px rgba(0,113,241,1);
    /*---------------------------*/
    /* 30%;
    height: 70%;
    position: relative;
    float: left;
    border: 0.5px solid darkgrey;
    border-radius: 10px;
    padding: 10px 0px 0px 0px;*/
}
.nogaoliang {
    -webkit-box-shadow: 0 0 0 #F8F8FF;
}
.pic {
    height:80%;
     80%;
    /*left: -200px;*/
    position: absolute;
   overflow:hidden;
}

.picfixed 
{
    height:100%;
    100%;
   
    position:relative;
}

.opacity {
    opacity:0;
}
/*======================================*/

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <title>东裕</title>
    <link rel="stylesheet" href="css/douyu.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <!--<link type="text/css" rel="stylesheet" href="css/css.css">-->
    <script src="jquery-2.1.1.min.js"></script>
    <!--<script src="index.js"></script>-->
</head>
<body>
    <div class="main">
        <div class="split" style="74.5%;">
            <!--==========================================大图轮播====================-->
            <div style="height:100%;100%;position:relative;">

                <ul id="pictures">
                    <!--<li><div style="height:100%;100%;position:relative"><iframe id="src1" frameborder="0" scrolling="no" src="" class="pic"></iframe></div></li>
                    <li style="list-style:none"><iframe id="src2" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src3" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src4" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src5" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src6" frameborder="0" scrolling="no" src="img/1.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src7" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src8" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src9" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                    <li><iframe id="src10" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>-->
                    <!--<li><img id="src1" src="img/1.jpg" class="picfixed"/></li>
                    <li><img id="src2"  src="img/2.jpg" class="picfixed"/></li>
                    <li><img id="src3"src="img/3.jpg" class="picfixed"/></li>
                    <li><img id="src4" src="img/4.jpg" class="picfixed"/></li>
                    <li><img id="src5"  src="img/5.jpg" class="picfixed"/></li>
                    <li><img id="src6" src="img/1.jpg" class="picfixed"/></li>
                    <li><img id="src7"  src="img/2.jpg" class="picfixed"/></li>
                    <li><img id="src8" src="img/3.jpg" class="picfixed"/></li>
                    <li><img id="src9"  src="img/4.jpg" class="picfixed"/></li>
                    <li><img id="src10"  src="img/5.jpg" class="picfixed"/></li>-->
                </ul>

            </div>

            <!--============================================================-->
        </div>
        <div class="split" style="0.5%;"></div>
        <div class="split" style="25%;">
            <!--=========================================================================================================================-->
            <div class="rightsplit " style="height:40%;">
                <form id="form1" runat="server" class="form">
                    <table style="100%;text-align:center;height:100%;position:relative;">
                        <tr class="tr">
                            <td class="td white">品名</td>
                            <td class="td white">前班产量</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="pinming"></td>
                            <td class="td green" id="qianbanchanliang"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">料号</td>
                            <td class="td white">当班产量</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="liaohao"></td>
                            <td class="td green" id="dangbanchanliang"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">工单号</td>
                            <td class="td white">理论周期</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="gongdanhao"></td>
                            <td class="td green" id="lilunzhouqi"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">开始时间</td>
                            <td class="td white">实际周期</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="kaishishijian"></td>
                            <td class="td green" id="shijizhouqi"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">订单量</td>
                            <td class="td white">不良数</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="dingdanliang"></td>
                            <td class="td green" id="buliangshu"></td>
                        </tr>
                        <tr class="tr">
                            <td class="td white">已完成量</td>
                            <td class="td white">不良率</td>
                        </tr>
                        <tr class="tr">
                            <td class="td green" id="yiwanchengliang"></td>
                            <td class="td green" id="bulianglv"></td>
                        </tr>
                    </table>
                </form>
            </div>

            <div class="rightsplit green" style="height:60%;">
                <div class="buliangpintongji ">不良品统计</div>
                <div style="100%;height:90%;position:relative;">
                    <form id="form1" runat="server" class="form">
                        <table style="100%;text-align:center;height:100%;position:relative;vertical-align:central;">
                            <tr class="trx green border">

                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id1" class="iddiv"></div>
                                            <div id="name1" class="namediv"></div>
                                        </div>
                                        <div id="value1" class="countdiv" style=""></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id10" class="iddiv"></div>
                                            <div id="name10" class="namediv"></div>
                                        </div>
                                        <div id="value10" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id19" class="iddiv"></div>
                                            <div id="name19" class="namediv"></div>
                                        </div>
                                        <div id="value19" class="countdiv"></div>
                                    </div>
                                </td>

                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id2" class="iddiv"></div>
                                            <div id="name2" class="namediv"></div>
                                        </div>
                                        <div id="value2" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id11" class="iddiv"></div>
                                            <div id="name11" class="namediv"></div>
                                        </div>
                                        <div id="value11" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id20" class="iddiv"></div>
                                            <div id="name20" class="namediv"></div>
                                        </div>
                                        <div id="value20" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id3" class="iddiv"></div>
                                            <div id="name3" class="namediv"></div>
                                        </div>
                                        <div id="value3" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id12" class="iddiv"></div>
                                            <div id="name12" class="namediv"></div>
                                        </div>
                                        <div id="value12" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id21" class="iddiv"></div>
                                            <div id="name21" class="namediv"></div>
                                        </div>
                                        <div id="value21" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id4" class="iddiv"></div>
                                            <div id="name4" class="namediv"></div>
                                        </div>
                                        <div id="value4" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id13" class="iddiv"></div>
                                            <div id="name13" class="namediv"></div>
                                        </div>
                                        <div id="value13" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id22" class="iddiv"></div>
                                            <div id="name22" class="namediv"></div>
                                        </div>
                                        <div id="value22" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id5" class="iddiv"></div>
                                            <div id="name5" class="namediv"></div>
                                        </div>
                                        <div id="value5" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id14" class="iddiv"></div>
                                            <div id="name14" class="namediv"></div>
                                        </div>
                                        <div id="value14" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id23" class="iddiv"></div>
                                            <div id="name23" class="namediv"></div>
                                        </div>
                                        <div id="value23" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id6" class="iddiv"></div>
                                            <div id="name6" class="namediv"></div>
                                        </div>
                                        <div id="value6" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id15" class="iddiv"></div>
                                            <div id="name15" class="namediv"></div>
                                        </div>
                                        <div id="value15" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id24" class="iddiv"></div>
                                            <div id="name24" class="namediv"></div>
                                        </div>
                                        <div id="value24" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id7" class="iddiv"></div>
                                            <div id="name7" class="namediv"></div>
                                        </div>
                                        <div id="value7" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id16" class="iddiv"></div>
                                            <div id="name16" class="namediv"></div>
                                        </div>
                                        <div id="value16" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id25" class="iddiv"></div>
                                            <div id="name25" class="namediv"></div>
                                        </div>
                                        <div id="value25" class="countdiv"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="trx white">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id8" class="iddiv"></div>
                                            <div id="name8" class="namediv"></div>
                                        </div>
                                        <div id="value8" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id17" class="iddiv"></div>
                                            <div id="name17" class="namediv"></div>
                                        </div>
                                        <div id="value17" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="div1 "></div>
                                </td>
                            </tr>
                            <tr class="trx green">
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id9" class="iddiv"></div>
                                            <div id="name9" class="namediv"></div>
                                        </div>
                                        <div id="value9" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="tddiv">
                                        <div class="div1 ">
                                            <div id="id18" class="iddiv"></div>
                                            <div id="name18" class="namediv"></div>
                                        </div>
                                        <div id="value18" class="countdiv"></div>
                                    </div>
                                </td>
                                <td class="tdx ">
                                    <div class="div1 "></div>
                                </td>
                            </tr>
                        </table>
                    </form>

                </div>
            </div>

            <!--===============================-->
            <!--===================================-->
        </div>
    </div>
    <script type="text/javascript">
        //================================键盘操作方法=======================
        init();
        var checked = 0;
        var countresult = 0;
        var keyCode = 0;
        var keyCodeArry = [];
        var numArry = [];
        var planid = 0;
        var postbadproid = 0;
        var postbadpronum = 0;
        var result = 0;
        var srcarr = [];
        var countdelcode = 0;
        var manualPlayindex = 0;
        //var value1 = document.getElementById("value1");
        //var value2 = document.getElementById("value2");
        //var value3 = document.getElementById("value3");
        //var value4 = document.getElementById("value4");
        //var value5 = document.getElementById("value5");
        //var value6 = document.getElementById("value6");
        //var value7 = document.getElementById("value7");
        //var value8 = document.getElementById("value8");
        //var value9 = document.getElementById("value9");
        //var value10 = document.getElementById("value10");
        //var value11 = document.getElementById("value11");
        //var value12 = document.getElementById("value12");
        //var value13 = document.getElementById("value13");
        //var value14 = document.getElementById("value14");
        //var value15 = document.getElementById("value15");
        //var value16 = document.getElementById("value16");
        //var value17 = document.getElementById("value17");
        //var value18 = document.getElementById("value18");
        //var value19 = document.getElementById("value19");
        //var value20 = document.getElementById("value20");
        //var value21 = document.getElementById("value21");
        //var value22 = document.getElementById("value22");
        //var value23 = document.getElementById("value23");
        //var value24 = document.getElementById("value24");
        //var value25 = document.getElementById("value25");

        //keydown调用的方法
        document.onkeydown = function (ev) {
            var oEvent = ev || event;
            keyCode = oEvent.keyCode;
            keyCodeArry = addKeyCodeArry(keyCode, keyCodeArry);
            if (keyCode == 106)
            {
                transform();
                updatebadreason();
                window.location.reload()
            }
          
            if (keyCode == 100 || keyCode == 102)
            {
              
                manualPlay("pictures", "li", keyCode);
            }
            enter();
        }
        //keyup调用的方法
        document.onkeyup = function (ev) {
            var oEvent = ev || event;
            keyCode = oEvent.keyCode;
            keyCodeArry = deleteKeyCodeArry(keyCode, keyCodeArry);
        }
        function addKeyCodeArry(num, arr) {
            arr = keyCodeArry;
            //var check = 0;
            //for (var i = 0; i < arr.length; i++) {
            //    if (arr[i] == num) {
            //        check = 1;
            //    }
            //}
            //if (check == 0) {
                arr.push(num);
            //}
            return arr;
        }
        function deleteKeyCodeArry(num, arr) {

            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == 111) {
                    arr = [];
                    window.location.reload()
                }
            }
            return arr
        }
        //===========================================================
        //===============通过按+或-键来计算不良品数量==============
        function count(num) {
            var content = "";
            if (num == 110) {
                content = checked;
            }
            if (num == 107) {
                countresult = countresult + 1;
                content = countresult;
            }
            if (num == 109) {
                if (countresult > 0) {
                    countresult = countresult - 1;
                }
                else {
                    countresult = 0;
                }
                content = countresult;
            }

            return content;
        }
        //=================通过按+或-键来计算不良品数量===============
        //==============删除高亮显示=================
        function removecss(id)//要改变css样式div的id
        {
            id.addClass('nogaoliang');
        }
        //============删除高亮显示=====================
        //=============按*键调用的方法=====================
        function transform() {

            if (keyCodeArry[1] == 110) {
                numKeycode = keyCodeArry[0];
                if (numKeycode == 97) { // 按 1
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value1'));
                }
                if (numKeycode == 98) { // 按 2
                    postbadproid = id2.innerText;
                    postbadpronum = value2.innerText;
                    removecss($('#value2'));
                }
                if (numKeycode == 99) { // 3 键
                    postbadproid = id3.innerText;
                    postbadpronum = value3.innerText;
                    removecss($('#value3'));
                }
              
                if (numKeycode == 101) { // 5键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value5'));
                }
               
                if (numKeycode == 103) { // 7 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value7'));
                }

                if (numKeycode == 104) { // 8键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value8'));
                }
                if (numKeycode == 105) { // 9 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value9'));
                }
            }
            if (keyCodeArry[2] == 110) {
                numKeycode = keyCodeArry[0]
                numKeycode1 = keyCodeArry[1]
                if (numKeycode == 99 && numKeycode1 == 107) { // 4 键  3和+
                    postbadproid = id4.innerText;
                    postbadpronum = value4.innerText;
                    removecss($('#value4'));
                }
                if (numKeycode == 101 && numKeycode1 == 107) { // 6键  5和+
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value6'));
                }
                if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value10'));
                }
                if (numKeycode == 97 && numKeycode1 == 97) {// 11 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value11'));
                }
                if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value12'));
                }
                if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value13'));
                }
                if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value14'));
                }
                if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value15'));
                }
                if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value16'));
                }
                if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value17'));
                }
                if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value18'));
                }
                if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value19'));
                }
                if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value20'));
                }
                if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value21'));
                }
                if (numKeycode == 98 && numKeycode1 == 98) {// 22 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value22'));
                }
                if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value23'));
                }
                if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value24'));
                }
                if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                    postbadproid = id1.innerText;
                    postbadpronum = value1.innerText;
                    removecss($('#value25'));
                }
            }


        }
        //=================按*键调用的方法=====================
        //===================添加高亮显示================================
        function addcss(id)//要改变css样式div的id
        {
            id.addClass('gaoliang');
        }
        //===============添加高亮显示====================
        //============按.键调用的方法======================
        function enter() {

            if (keyCodeArry[1] == 110) {
                numKeycode = keyCodeArry[0];
                if (numKeycode == 97) { // 按 1
                    value1.innerText = count(keyCode);
                    addcss($('#value1'));
                }
                if (numKeycode == 98) { // 按 2
                    value2.innerText = count(keyCode);
                    addcss($('#value2'));
                }
                if (numKeycode == 99) { // 3 键
                    value3.innerText = count(keyCode);
                    addcss($('#value3'));
                }
              
                if (numKeycode == 101) { // 5键
                    value5.innerText = count(keyCode);
                    addcss($('#value5'));
                }
              
                if (numKeycode == 103) { // 7 键
                    value7.innerText = count(keyCode);
                    addcss($('#value7'));
                }

                if (numKeycode == 104) { // 8键
                    value8.innerText = count(keyCode);
                    addcss($('#value8'));
                }
                if (numKeycode == 105) { // 9 键
                    value9.innerText = count(keyCode);
                    addcss($('#value9'));
                }
            }
            if (keyCodeArry[2] == 110) {
                numKeycode = keyCodeArry[0]
                numKeycode1 = keyCodeArry[1]
                if (numKeycode == 99 && numKeycode1 == 107)
                { // 4 键 3和+
                    value4.innerText = count(keyCode);
                    addcss($('#value4'));
                }
                if (numKeycode == 101 && numKeycode1 == 107)
                { // 6键  5和+
                    value6.innerText = count(keyCode);
                    addcss($('#value6'));
                }
                if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                    value10.innerText = count(keyCode);
                    addcss($('#value10'));
                }
                if (numKeycode == 97 && numKeycode1 == 97) {// 11 键
                    value11.innerText = count(keyCode);
                    addcss($('#value11'));
                }
                if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                    value12.innerText = count(keyCode);
                    addcss($('#value12'));
                }
                if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                    value13.innerText = count(keyCode);
                    addcss($('#value13'));
                }
                if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                    value14.innerText = count(keyCode);
                    addcss($('#value14'));
                }
                if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                    value15.innerText = count(keyCode);
                    addcss($('#value15'));
                }
                if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                    value16.innerText = count(keyCode);
                    addcss($('#value16'));
                }
                if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                    value17.innerText = count(keyCode);
                    addcss($('#value17'));
                }
                if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                    value18.innerText = count(keyCode);
                    addcss($('#value18'));
                }
                if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                    value19.innerText = count(keyCode);
                    addcss($('#value19'));
                }
                if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                    value20.innerText = count(keyCode);
                    addcss($('#value20'));
                }
                if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                    value21.innerText = count(keyCode);
                    addcss($('#value21'));
                }
                if (numKeycode == 98 && numKeycode1 == 98) {// 22 键  
                    value22.innerText = count(keyCode);
                    addcss($('#value22'));
                }
                if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                    value23.innerText = count(keyCode);
                    addcss($('#value23'));
                }
                if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                    value24.innerText = count(keyCode);
                    addcss($('#value24'));
                }
                if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                    value25.innerText = count(keyCode);
                    addcss($('#value25'));
                }
            }
        }
        //===============按.键调用的方法========================

        //==============页面加载时调用的方法==================
        function init() {

            loadinformation();
            //autoPlay("pictures", "li");
          
        }
        //================页面加载时调用的方法==================
        //data1 = data.josnObj.tsBadreasonrecs;
        //加载分享配置
        function loadinformation() {
            $.ajax({
                url: "http://192.168.21.230:8081/tsplan/getSopByEquId?equId=1057743339643867248",
                timeout: 10000, //超时时间设置,单位毫秒
                type: 'GET',
                data: {},
                dataType: "json",
                cache: false,
                error: erryFunction,  //错误执行方法
                success: succFunction //成功执行方法

            });
        }
        function updatebadreason() {

            $.ajax({
                //url: "http://192.168.21.230:8081/tsinspection/addSopBadRec? planId =" + planid + "& badproId=" + postbadproid + "& badproNum=" + postbadpronum,
                url: "http://192.168.21.230:8081/tsinspection/addSopBadRec/",
                type: 'POST',
                data: { planId: planid, badproId: postbadproid, badproNum: postbadpronum },
                dataType: "json",
                success: function (msg)
                {
                    alert("提交成功!!");
                },
                error: erryFunction//错误执行方法
                
            });
        }
        function erryFunction(msg) {
            alert("失败");
        }
     
        function succFunction(data) {

            //var json = eval(data); //数组
            var jsonbadreasonlist = data.josnObj.tsBadreasonrecs;//获取的数组
            var jsontsPlan = data.josnObj.tsPlan;
            var jsonobj = data.josnObj;
            var getsoplist = data.josnObj.sopList;
            var jsonpiclist = [];
            var piclist = [];
            var imgfile = "";
            var reletiveurl = "";
            pinming.innerText = jsontsPlan.productName;
            qianbanchanliang.innerText = jsonobj.beforeshiftsTotal;
            liaohao.innerText = jsontsPlan.productCode;
            dangbanchanliang.innerText = jsonobj.shiftsTotal;
            gongdanhao.innerText = jsontsPlan.planNum;
            lilunzhouqi.innerText = jsonobj.standCycle;
            kaishishijian.innerText = jsontsPlan.beginDate;
            shijizhouqi.innerText = jsontsPlan.cycletime;
            dingdanliang.innerText = jsontsPlan.planCount;
            buliangshu.innerText = jsontsPlan.badproTotal;
            yiwanchengliang.innerText = jsontsPlan.proTotal;
            bulianglv.innerText = (jsontsPlan.badproTotal / jsontsPlan.proTotal).toFixed(2);
            planid = jsontsPlan.planId;//要传给后台的planid

            $.each(getsoplist, function (index, item)
            {
                
               
                $.each(getsoplist[index], function (index1, item)
                {
                    piclist.push(getsoplist[index][index1].soppath);
                });
       
            });
            $.each(jsonpiclist, function (index, item)
            {
                if (jsonpiclist[index].soppath != null && jsonpiclist[index].soppath != "")
                {
                    piclist.push(jsonpiclist[index]);
                }
               
            });

            $.each(piclist, function (index, item)
            {
                imgfile = "http://192.168.21.230:8081/" + piclist[index];
                reletiveurl = piclist[index]
                showFile(imgfile, reletiveurl);
                //alert(imgfile);
            });
          
            $.each(jsonbadreasonlist, function (index, item)
            {

                //循环获取数据
                var id = jsonbadreasonlist[index].badproId;
                var name = jsonbadreasonlist[index].badreason;
                var num = jsonbadreasonlist[index].badproNum;

                if (id == 1) {
                    value1.innerText = num;
                    id1.innerText = id;
                    name1.innerText = name;

                }
                if (id == 2) {
                    value2.innerText = num;
                    id2.innerText = id;
                    name2.innerText = name;
                }
                if (id == 3) {
                    value3.innerText = num;
                    id3.innerText = id;
                    name3.innerText = name;
                }
                if (id == 4) {
                    value4.innerText = num;
                    id4.innerText = id;
                    name4.innerText = name;
                }
                if (id == 5) {
                    value5.innerText = num;
                    id5.innerText = id;
                    name5.innerText = name;
                }
                if (id == 6) {
                    value6.innerText = num;
                    id6.innerText = id;
                    name6.innerText = name;
                }
                if (id == 7) {
                    value7.innerText = num;
                    id7.innerText = id;
                    name7.innerText = name;
                }
                if (id == 8) {
                    value8.innerText = num;
                    id8.innerText = id;
                    name8.innerText = name;
                }
                if (id == 9) {
                    value9.innerText = num;
                    id9.innerText = id;
                    name9.innerText = name;
                }
                if (id == 10) {
                    value10.innerText = num;
                    id10.innerText = id;
                    name10.innerText = name;
                }
                if (id == 11) {
                    value11.innerText = num;
                    id11.innerText = id;
                    name11.innerText = name;
                }
                if (id == 12) {
                    value12.innerText = num;
                    id12.innerText = id;
                    name12.innerText = name;
                }
                if (id == 13) {
                    value13.innerText = num;
                    id13.innerText = id;
                    name13.innerText = name;
                }
                if (id == 14) {
                    value14.innerText = num;
                    id14.innerText = id;
                    name14.innerText = name;
                }
                if (id == 15) {
                    value15.innerText = num;
                    id15.innerText = id;
                    name15.innerText = name;
                }
                if (id == 16) {
                    value16.innerText = num;
                    id16.innerText = id;
                    name16.innerText = name;
                }
                if (id == 17) {
                    value17.innerText = num;
                    id17.innerText = id;
                    name17.innerText = name;
                }
                if (id == 18) {
                    value18.innerText = num;
                    id18.innerText = id;
                    name18.innerText = name;
                }
                if (id == 19) {
                    value19.innerText = num;
                    id19.innerText = id;
                    name19.innerText = name;
                }
                if (id == 20) {
                    value20.innerText = num;
                    id20.innerText = id;
                    name20.innerText = name;
                }
                if (id == 21) {
                    value21.innerText = num;
                    id21.innerText = id;
                    name21.innerText = name;
                }
                if (id == 22) {
                    value22.innerText = num;
                    id22.innerText = id;
                    name22.innerText = name;
                }
                if (id == 23) {
                    value23.innerText = num;
                    id23.innerText = id;
                    name23.innerText = name;
                }
                if (id == 24) {
                    value24.innerText = num;
                    id24.innerText = id;
                    name24.innerText = name;
                }
                if (id == 25) {
                    value25.innerText = num;
                    id25.innerText = id;
                    name25.innerText = name;
                }
            });
        }


      
        //=============大图自动轮播===============
        function autoPlay(parentID, childTag) {
            $(document).ready(function () {
                //循环执行,每隔1秒钟执行一次 1000
                var t1 = window.setInterval(refreshCount, 1000);

                function refreshCount() {
                    console.log("ready");
                }

                //去掉定时器的方法  
                //window.clearInterval(t1);
            });
            var pictures = document.getElementById(parentID);
            var items = pictures.getElementsByTagName(childTag);
            var len = items.length;
            var index = 0;
            showItem();
            // 显示一张图片
            function showItem() {
                // 首先将所有图片透明度设为0
                hideItems();
                items[index].style.opacity = 1;
                //items[index].css("opacity", "1");
                // 将要显示的透明度改变让其显示

                if (index > len - 2) {
                    index = 0;
                }
                else {
                    index++;
                }

                // 在这里用setTimeout模拟setInterval的效果
                setTimeout(showItem, 15000);
            }
            // 将所有图片透明度设为0
            function hideItems(parentID, childTag) {
                for (var i = 0; i < len; i++) {
                    items[i].style.opacity = 0;
                  
                }

            }

        };
        //=================大图自动轮播=================
        //================================手动切换图片===================
        function manualPlay(parentID, childTag, keynum)
        {
            
            var pictures = document.getElementById(parentID);

            var items = pictures.getElementsByTagName(childTag);
            var len = items.length;
            //alert(len);
            showItem();
            // 显示一张图片
            function showItem()
            {
                // 首先将所有图片透明度设为0
                hideItems();
                //items[2].style.opacity = 1;
                // 将要显示的透明度改变让其显示
               
                if (keynum == 102)  //增加  6键
                {
                    if (manualPlayindex > len - 2)
                    {
                        //alert("请按“-”号继续查看上图");
                        manualPlayindex = 0;
                    }
                    else
                    {
                        manualPlayindex++;
                    }
                }
                if (keynum == 100)   /*减少  4键*/
                {
                    if (manualPlayindex < 1)
                    {
                        alert("请按键“6”继续查看下图");
                        manualPlayindex = 0;
                    }
                    else {
                        manualPlayindex--;
                    }
                }
              
                 items[manualPlayindex].style.opacity = 1;
            }
            // 将所有图片透明度设为0
            function hideItems(parentID, childTag) {
                for (var i = 0; i < len; i++) {
                    items[i].style.opacity = 0;

                }
            }
        };
        //===================手动切换图片=================

        //==================================================

        //================================================
        //=======================删除li元素========================
       
            //=======================删除li元素===================
        function showFile(file,reurl)
        {
            //var file = $(obj).attr("data-src");

            var arr = reurl.split('.');
            var name = arr[1];
            var img_infor = "";
            var ul = document.getElementById("pictures");
            var obj = document.createElement("li");
            if (name == "pdf")
            {
                //img_infor = ' <iframe frameBorder="0" scrolling="no" src="' +
                //    file + '" style="700px; height:800px;position: absolute;overflow:hidden; "></iframe>';
                img_infor = ' <div style="height:800px;900px;position:absolute"> <iframe frameBorder="0" scrolling="no" src="' +
                    file + '" style="1400px; height:1000px;position: absolute;overflow:hidden;"></iframe></div>';
               
            }
            else
            {
                img_infor = '<div style="height: 1020px; 1430px; position: absolute"><img  src="' + file + ' "style="700px; height:800px;position: absolute;overflow:hidden;"/></div>';
            }
          
            obj.innerHTML = img_infor;
            ul.appendChild(obj);
            $('ul li').css('list-style', 'none');

            $('ul li').css('opacity', '0');
            $('ul li:first-child').css('opacity', '1');

        }
    </script>
</body>



</html>

原文地址:https://www.cnblogs.com/zhengqian/p/10930573.html