我自動增加輸入元素的值。我想獲得值

我正在使用輸入元素的值作爲Google地圖圈半徑的度量值。我希望輸入元素的值每秒增加，並立即使用該值作爲圓的半徑。我有點能夠做到這一點，但我必須改變自己的價值才能發揮作用。我想要圓的半徑自動增加。我自動增加輸入元素的值。我想獲得值

這裏是我的代碼：在兩個輸入&間隔

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #map { 
     height: 400px; 
     width: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <div id="datetime"> 
     Number: <input type="number" id="time" value="40"> 
    </div> 
    <script> 
     function timeInterval() { 
     setInterval(function(){ 
      document.getElementById("time").stepUp(10); 
     }, 1000); 
     } 
     window.onload = timeInterval; 

     function initMap() { 
     var annArbor = {lat: 42.271084, lng: -83.737277}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 16, 
      center: annArbor 
     }); 

     var circle = new google.maps.Circle({ 
          map   : map, 
          center  : annArbor, 
          radius  : parseInt(document.getElementById("time").value), 
          editable  : false, 
          strokeColor : '#FF0099', 
          strokeOpacity : 1, 
          strokeWeight : 2, 
          fillColor  : '#009ee0', 
          fillOpacity : 0.2 
         }); 
     var time = document.getElementById('time'); 
     time.addEventListener('input', function() { 
      circle.setRadius(parseInt(document.getElementById('time').value)); 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
    </script> 
    </body> 
</html>

來源

2017-06-11 Ibarrameade

剛剛更新循環。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     #map { 
 
     height: 400px; 
 
     width: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <div id="datetime"> 
 
     Number: <input type="number" id="time" value="40"> 
 
    </div> 
 
    <script> 
 
     function timeInterval() { 
 
     setInterval(function(){ 
 
      document.getElementById("time").stepUp(10); 
 
      setRadius() 
 
     }, 1000); 
 
     } 
 
     window.onload = timeInterval; 
 
     
 
     var circle; 
 
     
 
     function setRadius(){ 
 
     
 
     circle.setRadius(parseInt(document.getElementById('time').value)); 
 
     } 
 

 
     function initMap() { 
 
     var annArbor = {lat: 42.271084, lng: -83.737277}; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: annArbor 
 
     }); 
 

 
     circle = new google.maps.Circle({ 
 
          map   : map, 
 
          center  : annArbor, 
 
          radius  : parseInt(document.getElementById("time").value), 
 
          editable  : false, 
 
          strokeColor : '#FF0099', 
 
          strokeOpacity : 1, 
 
          strokeWeight : 2, 
 
          fillColor  : '#009ee0', 
 
          fillOpacity : 0.2 
 
         }); 
 
     var time = document.getElementById('time'); 
 
     time.addEventListener('input', setRadius); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

來源

2017-06-11 22:20:38

它的工作！非常感謝你。 – Ibarrameade

我自動增加輸入元素的值。我想獲得值

回答

相關問題