大家好，感谢您的宝贵时间!我有一个简单的问题.. 我有一个 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;
}
最佳答案
首先，更新您的脚本，将其封装为一个函数。从风格上讲，您可以选择将其进一步拆分，但至少，一个函数比拥有一个在全局空间中运行的脚本要好。
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
关于javascript - 如何在 html 页面中添加脚本的结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49073162/