Question

我知道这是一个简单的问题，但我在网上进行了研究并试了很多东西，但它没有成功。

我正在制作一个简单的文件传输时间估算器，我需要的只是重新加载的页面，然后在单击计算按钮时显示结果。（类似于如果用PHP制作它会如何工作。）

我要么陷入重载循环，要么在尝试执行此操作时丢失表单数据。我在点击提交按钮时将变量添加到URL，我希望用户转到此页面（刷新），结果滚动到视图中。

以下是相关的HTML

window.onload=function(){

calculateButton.onclick = calc;


if(window.location.hash){
    var uri = window.location.hash;
    internetSpeed.value = uri.match(/speed=([\d.]+)x(\d+\^\d+)/)[1];
    internetSpeedBase.value = uri.match(/speed=([\d.]+)x(\d+\^\d+)/)[2];
    internetOverhead.value = uri.match(/overhead=([\d.]+)/)[1];

    fileSize.value = uri.match(/file=([\d.]+)x(\d+\^\d+)/)[1];
    fileSizeBase.value = uri.match(/file=([\d.]+)x(\d+\^\d+)/)[2];

    calc();
}
else if(window.localStorage){
    if(window.localStorage.getItem('downloadtime.speed')){
        internetSpeed.value = window.localStorage.getItem('downloadtime.speed');
        internetSpeedBase.value = window.localStorage.getItem('downloadtime.speedBase');
        internetOverhead.value = window.localStorage.getItem('downloadtime.overhead');
        fileSize.value = window.localStorage.getItem('downloadtime.file');
        fileSizeBase.value = window.localStorage.getItem('downloadtime.fileBase');
    }
    else defaults();
}
else defaults();


};

function defaults(){
internetSpeed.value = "10";
internetSpeedBase.value = "10^6";
internetOverhead.value = "0.9";
fileSize.value = "1";
fileSizeBase.value = "2^30";
}

function calc(){

// Internet speed

var internet = {
    speed: internetSpeed.value,
    factor: internetSpeedBase.value,
    overhead: internetOverhead.value,
}

internet.speed = parseFloat(internet.speed);
internet.overhead = parseFloat(internet.overhead);
internet.factor = {
    base: internet.factor.match(/(\d+)\^(\d+)/)[1],
    power: internet.factor.match(/(\d+)\^(\d+)/)[2]
}

internet.bitsPerSec = internet.speed * Math.pow(internet.factor.base, internet.factor.power);
internet.bytesPerSec = internet.bitsPerSec/8;

//File size

var file = {
    size: fileSize.value,
    factor: fileSizeBase.value,
}

file.size = parseFloat(file.size);
file.factor = {
    base: file.factor.match(/(\d+)\^(\d+)/)[1],
    power: file.factor.match(/(\d+)\^(\d+)/)[2]
}
file.bytes = file.size * Math.pow(file.factor.base, file.factor.power);

//speed
internet.effectiveBytesPerSec = internet.bytesPerSec * internet.overhead;

//download time in milliseconds
var transferTime_ms = (file.bytes/internet.effectiveBytesPerSec)*1000;


if(window.location){
    var uri=[];
    uri.push("file="+fileSize.value+"x"+fileSizeBase.value);
    uri.push("speed="+internetSpeed.value+"x"+internetSpeedBase.value);
    uri.push("overhead="+internetOverhead.value);
    window.location.hash = uri.join("&");
}

if(window.localStorage){        
    window.localStorage.setItem('downloadtime.speed', internetSpeed.value);
    window.localStorage.setItem('downloadtime.speedBase', internetSpeedBase.value);
    window.localStorage.setItem('downloadtime.overhead', internetOverhead.value);
    window.localStorage.setItem('downloadtime.file', fileSize.value);
    window.localStorage.setItem('downloadtime.fileBase', fileSizeBase.value);
}


//Show results
document.querySelector("#results .time").innerHTML = moment.preciseDiff(0, transferTime_ms);
document.querySelector("#results .size").innerHTML = prefixByteLong(file.bytes);
document.querySelector("#results .speed").innerHTML = prefixByte(internet.effectiveBytesPerSec);

document.getElementById("results").style.visibility = "visible";

document.getElementById("results").scrollIntoView();

}

而且，这是javascript

<script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert(status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

非常感谢任何帮助。

如何刷新页面上的表单提交按钮单击，然后在JavaScript中显示结果？

0 个答案: