如何将计数器的结果放入html页面顶部的卡片中？

Question

对于我的项目，我用Groovyscript创建了一个比较脚本来比较两个不同的文件。在Groovyscript中，我添加了HTML，它使用CSS，并最终使用引导(任何版本)。

我已经设法让我的计数器在HTML页面上有一个标题，但是它不是动态的/响应的。当您更改页面的宽度和高度时，布局就会崩溃。我读过Bootstrap/CSS可以帮助在分辨率改变时重新安排页面。所以我被牌吸引住了。这很好，但是当页面变得更大或更小时，布局就关闭了。

​

    <html lang='en'>
        <head>
        <!-- Required meta tags -->
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
        <!-- Bootstrap CSS -->
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ' crossorigin='anonymous'>
        <title>GroovyCardsBootstrap</title>    
        <style>   
        h{color:#86BEB6; font-size:50px;}
        * {box-sizing: border-box;}
        body {font-family: Arial,Helvetica, sans-serif;}
        /* Float 4 columns side by side 
        .column4 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:5px;}
        .column3 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:205px;}
        .column2 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:405px;}
        .column1 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:605px;}*/
        /* Remove extra left and right margins, due to padding */
        .row {margin: 0 -3px;}
        /* Clear floats after the columns */
        .row:after {
            content: '';display: table;clear: both;
            }
        .card {
            display:inline-block;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            padding: 16px;
            text-align: center;
            }
        .card-group [class*='col-']{
            float:none;}
        </style>
        </head>
        <body>
        <div class='card-group'>
            <div class='card'>
                <div class='card-block'>
                    <img class='card-text'  src='FODBosa.png'  alt='FodBosa.png' width='400' height='150' />
                </div>
            </div>
            <div class='card' style='flex-grow: 3'>
                <div class='card-block'>
                    <span class='card-text' style='padding:0 5px'>Text 2</span><span class='card-text' style='padding:0 5px'>More text 2</span><span class='card-text' style='padding:0 5px'>More text 2</span>
                    
                    
                </div>
            </div>
        </div>
        <h>Test results comparison KBO with PDC</h>
        <div style = 'border:1px solid black; border-collapse: collapse;'>
            <p>Automated tests are executed in ReadyAPI. These are the results of the comparison on the responses between KBO and PDC</p>
        </div>"

之后，Groovyscript将以以下行结尾：

​

​

outputFile.append "<div class='card-group'><div class='card' style='background-color:black; color:white;'><div class='card-block'> <h3>Not found in KBO</h3> <p>" +notInPDCCounter+ "</p></div></div>"
    outputFile.append "<div class='card-group'><div class='card' style='background-color:#DA4747;'><div class='card-block'> <h3>Failed - PDC not same as KBO</h3>  <p>" +hasDifferences+ "</p></div> </div>"
    outputFile.append "<div class='card-group'><div class='card' style='background-color:#ff8080;'><div class='card-block'> <h3>Total lines read</h3>    <p>"+ failed + "</p></div></div>"
    outputFile.append "<div class='card-group'><div class='card' style='background-color:#52DA69;'><div class='card-block'> <h3>Passed - Info is in PDC</h3>    <p>" +(totalTotal-failed)+ "</p></div> </div> </div>"

​

outputFile.append给我在html页面开头的段落下面放置了漂亮的方框(我需要将代码插入到HTML中，以便您能够看到它，因此结果是不确定的)，但是我实际上希望在卡片本身中找到我在开头创建的答案(参见旁边的那个)。我怎样才能把计数器的结果，在所有这些过程中用groovy脚本生成的，从而只给出结果在最后，请在右上卡？提前谢谢。

​

​

Answer 1

不知道我说得对不对：

你想在页面右上角并排显示4张卡片吗？你想让这些卡在不同的大众汽车上有反应吗？

我不太熟悉Groovy，但是如果您可以将卡片打包到div中(或者通过id来锁定div )，那么您可以使用CSS Grid (用于响应)创建一个4列网格，并设置每个列的宽度，这样当宽度变小时，它们就会进入一个新的行。

希望能帮上忙！

Answer 2

我从艾丽卡·拉瓦佐洛的小费中发现了这一点：

我已经将这个JQuery脚本放在页面底部(当然是在正文中！)

outputFile.append "<script> \$('#source').appendTo('#destination');</script>"

显然，对于Groovyscript来说，你需要用反斜杠省略美元符号。不过我不认识维。在为顶部定义我的卡片的部分中，插入目标：

        <div class='card' style='flex-grow: 3' id='destination'></div>

我删除了span标签

在我定义卡片的部分，我将它们添加为源：

<div class='card-block' id='source'>....</div>

我已经为我自己修剪了一些盒子，就像我给你的例子，你会看到盒子里有一个盒子。:-)