[英]How to Add the results of a script in a html page?
大家好,感謝您的時間! 我有一個簡單的問題.. 我有一個 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
取決於您希望它出現在 HTML 中的位置。 基本上你會有一個元素,你可以在其中放置結果。 例如,在您的頁面中,您可能有一個 id 為“result”的span
,並通過其innerHTML
屬性將其放入其中。
document.getElementById('result').innerHTML = "percentage: " + (counter/(data.length/4))*100
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.