2

我试图HtmlService通过“赛马”场景来展示我的公司在实现目标方面取得的进展。（这个想法是让一匹马的图像从左到右穿过另一个马道图像。我们的目标值是一个介于0和之间的数字，60并存储在 Google 电子表格中。）

我已经弄清楚如何在屏幕上打印值以及如何使用 JavaScript ( jQuery ) 来更新CSS移动马。但是，我无法将两者联系在一起。这是我能想到的：

我的Code.gs档案

function doGet() {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();    
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
      .getContent();
}

function getHeadCount() {
  var ss = SpreadsheetApp.openById('some id');
  var sheet = ss.getSheetByName("Horse race headcount");
  var hC = sheet.getRange(24, 2);
  var headCount = hC.getValue();

  return headCount
}

我的Page.html档案

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<?!= include('Stylesheet'); ?>    
<!-- the above code serves the same purpose as an href for a style sheet --> 

    <div id='page' width="100%">
        <div id="wrapper">
            <img src="http://i.imgur.com/j1hUEvx.jpg" width="96%" />
            <div><p>Consultant Starts: <?!= getHeadCount(); ?> </p></div>
            <!-- the < ? != tag is for inserting the value of the function into the template -->                    

            <div id="mustang">
                <img src="http://i.imgur.com/CFtqjuy.png" />
            </div>
                <div id='scale'>
                    <div class='block' id='one'><span>start</span></div>
                    <div class='block' id='two'><span>10</span></div>
                    <div class='block' id='three'><span>20</span></div>
                    <div class='block' id='four'><span>30</span></div>
                    <div class='block' id='five'><span>40</span></div>
                    <div class='block' id='six'><span>50</span></div>
                </div>
        </div>
    </div>
<?!= include('JavaScript'); ?>

我的css.html文件： 

<style>   
    #page {
        background-color: f0f0f0;
        padding: 5px;          
    } 

    #wrapper { 
        margin: 0 auto;          
    }

   #mustang {
       position: relative;
       top: -347px;
       left: <?!= horseRace(); ?> <!-- 38% for 31 headCount -->                          
   }

    #scale {
       display: inline;
       text-align: center;
       width: 96%;
    }

    .block {
          float: left;
          position: relative; 
          width: 16%; 
          height: 30px;
          top: -400px;    
     }

     div p {
         width:100px;
         height: 50px;
         background-color: #f0f0f0; 
         position: relative;
         top: -300px;        
     }     

     #one {
          background-color: #1F78B4;
     }

     #two {
          background-color: #33A02C; 
     }

     #three {
          background-color: #E31A1C;
     }

     #four {
          background-color: #FF7F00;
     }

     #five {
          background-color: #6A3D9A;
     }

     #six {         
          background-color: #18258B;
     } 
</style>

我也有一个JavaScript.html文件，虽然我没有任何运气使用它来更新CSSfrom call getHeadCount();。

有什么建议或想法吗？我确信有办法做到这一点 - 我只是遇到问题，因为我是一般编程的新手。任何帮助将不胜感激，谢谢！

4

1 回答 1

1

使用 jQuery，您可以操作样式元素。在这种情况下，您想要更改$(#mustang).left. 由于您的include()函数只是将所有文件视为 Html 文件（而不是模板），因此它不会进行任何模板扩展，因此请清理 css：

 #mustang {
     position: relative;
     top: -347px;
     left: 0%    
 }

现在，在您的 中JavaScript.html，您需要一个在页面加载时运行的函数，该函数将收集电流headCount并使用它来设置定位您的马的样式值。

<script>

// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(positionHorse)
      .getHeadCount();
});

function positionHorse(headCount) {
  var position = 100 * headCount / 60;
  $('#mustang').css('left', (position)+'%');
}

</script>

注意：如果您将 css 视为模板并调用evaluate()它，那可能会为您解决问题。

你doGet()不应该像发布的那样工作......它不会返回 htmlOutput。这是我用于测试的内容：

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('Page');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('Horse Race');

  return htmlOutput;
}

结果

于 2013-07-29T17:37:51.013 回答