HTML文件中的输入框，控制JS文件中的数字

Input box in an HTML file that controls a number in a JS file

本文关键字：文件 JS 数字 控制 输入 HTML      更新时间：2023-09-26

我有一个JS文件的函数，看起来像这样:

function Animation(options) {
  defaultOptions = {       
    'direction'         : 'clockwise',         
    'propertyName'      : null,                
    'propertyValue'     : null,                
    'duration'          : 15,                                 
    'repeat'            : null,                                     
    'callbackFinished'  : null,                
    'callbackBefore'    : null,                
    'callbackAfter'     : null,           
  }
  ...

…然后它继续到动画的其余部分，使用这些值。

假设我想在一个html文件中有一个直接改变其中一个值的输入框，我该怎么做呢?

我只需要它的工作，所以如果你把"24"输入框，并按下一个按钮，它会设置"持续时间"为24。然后，当您刷新.html文件并触发动画时，它的持续时间将为24。

这可能吗?如果没有，有没有别的方法可以实现我想要的?

当然可以!

在我的代码片段中，如果你填充输入，它将覆盖默认选项，但如果你让它为空，它将保持15作为默认值。

希望对你有帮助!

function Animation(options) {
  defaultOptions = {       
    'direction'         : 'clockwise',         
    'propertyName'      : null,                
    'propertyValue'     : null,                
    'duration'          : options.duration || 15,                                 
    'repeat'            : null,                                     
    'callbackFinished'  : null,                
    'callbackBefore'    : null,                
    'callbackAfter'     : null,           
  };
  alert('duration is : ' + defaultOptions.duration);
};
function callAnimation() {
  var input = document.getElementById('animationDuration');
  Animation({duration: input.value});  
};
<input type="number" step="1" id="animationDuration">
<button onclick="callAnimation()">Confirm</button>

您可以考虑定义一个构造函数，以便可以使用不同的设置实例化它。例如:

<!DOCTYPE html>
</head>
<body>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
function Animation() {
  this.defaultOptions = {       
    'direction'         : 'clockwise',         
    'propertyName'      : null,                
    'propertyValue'     : null,                
    'duration'          : 15,
    'repeat'            : null,                                     
    'callbackFinished'  : null,                
    'callbackBefore'    : null,                
    'callbackAfter'     : null,           
  }
  // alternative ways to define and access the properties
  var thisAnim = this;
  this.direction = 'clockwise';
  this.propertyName = 'duration';
  this.propertyValue = thisAnim.defaultOptions.duration;
}
function SetAnimDuration(value) {
  // set option value
  myAnim.defaultOptions.duration=value;
  // debugger display
  document.getElementById('msg').innerHTML = myAnim.defaultOptions.duration;
  console.log("duration=", myAnim.propertyValue);
}
var myAnim = new Animation();
</script>
</head>
<body>
Click a button to set the duration:
<br>
  <button id="setDuration" type="button" class="button" onclick="SetAnimDuration('24')">Set Duration to 24</button>
<br>
  <button id="setDuration" type="button" class="button" onclick="SetAnimDuration('35')">Set Duration to 35</button>
<br> Duration: <span id='msg'> N/A </span>
</body>
</html>

相关文章：