如何在html页面中添加脚本的结果？

Question

大家好，感谢您的时间！ 我有一个简单的问题.. 我有一个 javascript 文件，我想将它嵌入到 html 页面中。 下来，你会看到这个javascript文件。 最后，我有这一行：

console.log("percentage:",(counter/(data.length/4))*100)

这个百分比我想出现在一个 html 文件中。 我怎样才能使它成为一个脚本，然后从/在一个 html 文件中调用它/出现它？ 非常感谢您！我的 javascript 文件：

var t0= performance.now();
if (navigator.geolocation) {
var location_timeout = setTimeout("geolocFail()", 10000);

navigator.geolocation.getCurrentPosition(function(position) {
    clearTimeout(location_timeout);

    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    geocodeLatLng(lat, lng);
}, function(error) {
    clearTimeout(location_timeout);
    geolocFail();
   });
   } else {
   // Fallback for no geolocation
   geolocFail();
   }

   getBase64FromImageUrl("https://maps.googleapis.com/maps/api/streetview?
   location=lng,lat&size=300x300&pitch=90")

   function getBase64FromImageUrl(url) {
   var img = new Image();
   var range = 60;
   img.setAttribute('crossOrigin', 'anonymous');

   img.onload = function () {
   var canvas = document.createElement("canvas");
   canvas.width =this.width;
   canvas.height =this.height;

   var ctx = canvas.getContext("2d");
   ctx.drawImage(this, 0, 0);
   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

   //console.log("imageData",imageData);
   //var dataURL = canvas.toDataURL("image/png");
   var index = (150*imageData.width + 150) * 4;
   var red = imageData.data[index];
   var green = imageData.data[index + 1];
   var blue = imageData.data[index + 2];
   var alpha = imageData.data[index + 3];
   console.log(red)
   console.log(green)
   console.log(blue)
   var rangedRB = red -range;
   var rangedGB = green -range;
   var rangedBB = blue -range;

    var rangedRT = red +range;
    var rangedGT = green +range;
    var rangedBT = blue +range;

    var data = imageData.data;
    var counter = 0;
    for(var i=0; i<data.length; i+=4) {
    var red = data[i];
    var green = data[i+1];
    var blue = data[i+2];
    if ((red<rangedRT && red>rangedRB) && (green<rangedGT && green>rangedGB) 
    && (blue<rangedBT && blue>rangedBB)){
    counter = counter +1;
    console.log("counter",counter)
     }
     }
     console.log("counterFinal",counter)
     console.log("data.length",data.length/4)
     console.log("percentage:",(counter/(data.length/4))*100)

     //console.log(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
     // alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
     var t1 = performance.now();
     console.log("The estimated time is:",t1-t0,"milliseconds")
      };

      img.src = url;
      }

Answer 1

首先，更新您的脚本，使其封装为一个函数。 从风格上讲，您可以选择将其分解得更远，但至少，函数比在全局空间中运行的脚本要好。

function getGeolocationResult() {
  // script code goes here.

  return (counter / (data.length/4)*100); 
}

然后将其嵌入到 HTML 页面中：，最简单的解决方案是使用 Javascript、 appendChild和createElement

//caveat, not tested!
<html>
 <body>
  <div id='mydiv'></div>

   <script src='yourscript.js'></script>
   <script type='javascript'>
     function showPercentage() {
       var result = getGeolocationResult();
       var elm = document.getElementById('mydiv');
       var d = document.createElement('div');
       d.innerText = result;
       elm.appendChild(d);
     }

     // since you don't need to wait for the entire page to load 
     // (i.e. css and/or image tags, DOMContentLoaded should suffice. 
     // If you need to wait, use window.addEventListent('load',...) instead.
     document.addEventListener("DOMContentLoaded", showPercentage);
   </script>
  </body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Answer 2

取决于您希望它出现在 HTML 中的位置。 基本上你会有一个元素，你可以在其中放置结果。 例如，在您的页面中，您可能有一个 id 为“result”的span ，并通过其innerHTML属性将其放入其中。

document.getElementById('result').innerHTML = "percentage: " + (counter/(data.length/4))*100

如何在html页面中添加脚本的结果？

问题描述

2 个解决方案

解决方案1
1 2018-03-02 16:26:08

解决方案2
0 2018-03-02 16:22:33

如何在html页面中添加脚本的结果？

问题描述

2 个解决方案

解决方案1 1 2018-03-02 16:26:08

解决方案2 0 2018-03-02 16:22:33

解决方案1
1 2018-03-02 16:26:08

解决方案2
0 2018-03-02 16:22:33