Question

我有一个JS文件，其函数如下所示：

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

...然后继续使用这些值继续动画的其余部分。

假设我想在html文件中设置一个直接更改其中一个值的输入框，我将如何进行此操作？

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

这可能吗？如果没有，是否有另一种方法可以实现我的目标？

Answer 1

当然可以这样做！

在我的代码段中，如果您填写输入，它将覆盖默认选项，但如果您将其清空，则会将15保留为默认值。

希望这有帮助！

＆＃13;

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});  
};

＆＃13;

<input type="number" step="1" id="animationDuration">
<button onclick="callAnimation()">Confirm</button>

＆＃13;

Answer 2

您可以考虑定义构造函数，以便可以使用不同的设置对其进行实例化。例如：

<!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>

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

2 个答案: