Question

我正在尝试创建一个摆锤模拟，并在其旁边有一个滑块以使用滑块调整其值（例如，长度，质量，角度等），但是我似乎无法将代码链接到滑块足够。

我希望滑块能够实时更改变量，以便用户可以使用这些值，但是我不知道问题出在哪里。

<!DOCTYPE html>
<html lang="en" >
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 0px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<head>
  <meta charset="UTF-8">
  <title>Pendulum Javascript Simulation</title>
    <meta charset="UTF-8">
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

		<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.css'>

      <link rel="stylesheet" href="css/style.css">
      <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="design.css">
  
  
  
</head>

<body>


<h1>Programmatic value changes</h1>
<br>
<br>
<input type="range" id="js-amount-range" value="0" min="0" max="100")>
<br>
<br>
<input type="number" id="js-amount-input" value="0" min="0" max="100" ></input>

<span> degrees </span>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js'></script>

  <section class="wrapper">
        <div id="stars"></div>
        <div id="stars2"></div>
        <div id="stars3"></div>
        <div id="title">
            <span></span>
            <br>
            <span>THE PENDULUM SIMULATION</span>
        </div>
    </section>


	
  <canvas id="myCanvas" width='1270' height='600' style='border:15px solid black'></canvas>
<script>
    function updateSlider(slideAmount) {
        var sliderDiv = document.getElementById("sliderAmount");
        sliderDiv.innerHTML = slideAmount;
    }
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
      <script  language="javascript">
	  <!--function changeLength() {
	  <!--var num1 = parseString(document.getElementById('js-amount-input').value;
	  	  
	  <!--}
	 
var rangeslider = $('#js-amount-range');
var amount = $('#js-amount-input');

rangeslider
  .rangeslider({
    polyfill: false
  })
  rangeslider.on('input', function() {
    amount[0].value = this.value;
  });

amount.on('input', function() {
  rangeslider.val(this.value).change();
});

	  <!-- -->
var Animation = function(canvasId) {
  this.canvas = document.getElementById(canvasId);
  this.context = this.canvas.getContext("2d");
  this.t = 0;
  this.timeInterval = 0;
  this.startTime = 0;
  this.lastTime = 0;
  this.frame = 0;
  this.animating = false;
  
  // by Paul Irish
  window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame ||
      function(callback){
      window.setTimeout(callback, 1000 / 60);
    };
  })();
};



Animation.prototype.getContext = function getContext(){
  return this.context;
};

Animation.prototype.getCanvas = function(){
  return this.canvas;
};

Animation.prototype.clear = function(){
  this.context.clearRect(10, 10, this.canvas.width, this.canvas.height);
};

Animation.prototype.setStage = function(func){
  this.stage = func;
};

Animation.prototype.isAnimating = function(){
  return this.animating;
};

Animation.prototype.getFrame = function(){
  return this.frame;
};

Animation.prototype.start = function(){
  this.animating = true;
  var date = new Date();
  this.startTime = date.getTime();
  this.lastTime = this.startTime;
  
  if (this.stage !== undefined){
    this.stage();
  }
  
  this.animationLoop();
};

Animation.prototype.stop = function(){
  this.animating = false;
};

Animation.prototype.getTimeInterval = function(){
  return this.timeInterval;
};

Animation.prototype.getTime = function(){
  return this.t;
};

Animation.prototype.getFps = function(){
  return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
};

Animation.prototype.animationLoop = function(){
  var that = this;
  
  this.frame++;
  var date = new Date();
  var thisTime = date.getTime();
  this.timeInterval = thisTime - this.lastTime;
  this.t += this.timeInterval;
  this.lastTime = thisTime;
  
  if (this.stage !== undefined){
    this.stage();
  }
  
  if (this.animating){
    window.requestAnimFrame(function(){
      that.animationLoop();
    });
  }
  
};

window.onload = function (){
  // instantiate new Animation object
  var anim = new Animation("myCanvas");
  var context = anim.getContext();
  var canvas = anim.getCanvas();
  
  
  var amplitude = Math.PI / 2.5; // 45 degrees
  var period = 2000; //ms
  var theta = 0;
  var pendulumLength = 500;
  var pendulumWidth = 10;
  var rotationPointX = canvas.width / 2; //position the pendulum
  var rotationPointY = 50; //position the pendulum
  
  anim.setStage(function(){
    //update
   theta = (amplitude * Math.sin((2 * Math.PI * this.getTime()) / period)) + Math.PI / 2;
    
    //clear
    this.clear();
    
    //draw top circle
    context.beginPath();
    context.arc(rotationPointX, rotationPointY, 15, 0, 2 * Math.PI, false);
    context.fillStyle = "black";
    context.fill();
    
    //draw shaft
    context.beginPath();
    var endPointX = rotationPointX + (pendulumLength * Math.cos(theta));
    var endPointY = rotationPointY + (pendulumLength * Math.sin(theta));
    context.beginPath();
    context.moveTo(rotationPointX, rotationPointY);
    context.lineTo(endPointX, endPointY);
    context.lineWidth = pendulumWidth;
    context.lineCap = "round";
    context.strokeStyle = "#555";
    context.stroke();
    
    //draw bottom circle
    context.beginPath();
    context.arc(endPointX, endPointY, 40, 0, 2 * Math.PI, false);
    var grd = context.createLinearGradient(endPointX - 50, endPointY - 50, endPointX + 50, endPointY + 50);
    grd.addColorStop(0, "#1d3649");
    grd.addColorStop(0.5, "#3092f4");
    grd.addColorStop(1, "#3092f4");
    context.fillStyle = grd;
    context.fill();
  });
  anim.start();
  
};

   
	var rangeslider = $('#js-amount-range');
var amount = $('#js-amount-input');

rangeslider
  .rangeslider({
    polyfill: false
  })
  .on('input', function() {
    amount[0].value = this.value;
  });

amount.on('input', function() {
  $pendulumLength.val(this.value).change();
});
	
	
</script>

	<!---<script src="js/slider.js"></script>--->
    
	
		<script language="javascript">
	var pendulumLength = $('#js-amount-range');
var amount = $('#js-amount-input');

pendulumLength
  .rangeslider({
    polyfill: false
  })
  pendulumLength.on('input', function() {
    amount[0].value = this.value;
  });

amount.on('input', function() {
  pendulumLength.val(this.value).change();
});
</script>

<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
 
}

</script>	


</body>

</html>

Answer 1

在滑块输入上，该变量将当前值从滑块上移下来，并在拖动时实时将其打印到一个跨度中。

sliderChange=function(n)
{
var e=n;
$('span').text("Pendulum length is: "+e);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input type="range" oninput="sliderChange(this.value)" />
<span></span>

链接滑块更改实时变量

1 个答案: