<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Mayatnik</title>
<h1 style = 'text-align: center'> Маятник </h1>
<head>
<link href="http://nitinhayaran.github.io/jRange/jquery.range.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://nitinhayaran.github.io/jRange/jquery.range.js"></script>
<style>
#canvas
{
display: block;
margin: 0 auto;
padding: 0;
}
#polzunok
{
width: 300px;
height: 40px;
display: block;
margin: 0 auto;
}
.quantity-block
{
display: block;
margin:1px 1px 3px 360px;
padding: 10px 10px 5px 0px;
font-size: 20px;
}
.button
{
background-color: white;
color: black;
border: 2px solid #555555;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
margin: 4px 520px;
cursor: pointer;
height: 100%;
width: 250px;
border-radius: 8px;
}
</style>
</head>
<div id="center">
<canvas id=canvas width="350" height="350" style="background: #eee"></canvas>
</div>
<div class = "quantity-block">
<label > Масса шарика: </label>
<input name="massa" type="number" />
<label > Длина маятника: </label>
<input name="dlina" type="number" />
<br>
 
<label > Коэффициент сопротивления окружающей среды: </label>
<input name="kf" type="number" />
<br>
 
 
 
 
<label > Текущий угол отклонения: </label>
<input name="angle0" type="number" />
<br>
</div>
<h2 style='text-align: center'> Изменение начальногоугла маятника(в градусах)</h2>
<div id ="polzunok">
<input class="range-slider" type="hidden" value="0" />
</div>
<script type = "text/javascript">
$('.range-slider').jRange({
from: -90 ,
to: +90,
step: 1,
scale: [-90,0,+90],
format: '%s',
width: 300,
showLabels: true,
snap: true
});
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
requestAnimationFrame(draw);
function draw() {
var g =9.8;
var angle = $("#polzunok")[0].children[0].value / 180 * Math.PI+(Math.PI*1/2);
var size = Math.min(canvas.width, canvas.height);
var ox = (canvas.width / 2) >> 0;
var rPend = size * 0.45;
var rBall = size * 0.05;
var x = (ox - rPend * Math.cos(angle)) | 0;
var y = (rPend * Math.sin(angle) + 2) | 0;
context.clearRect(0, 0, canvas.width, canvas.height);
drawBg(context, canvas.width, canvas.height);
drawBase(context, canvas.width);
drawLine(context, ox, x, y);
drawBall(context, x, y, rBall);
requestAnimationFrame(draw);
}
function drawBg(context, w, h) {
context.fillStyle = "rgba(255,255,255,0.51)";
context.fillRect(0, 0, w, h);
context.fillStyle = "black";
}
function drawBase(context, w) {
context.save();
context.moveTo(0, 2);
context.lineTo(w, 2);
context.lineWidth = 3;
context.stroke();
context.restore();
}
function drawLine(context, ox, x, y) {
context.save();
context.moveTo(ox, 0);
context.lineTo(x, y);
context.lineWidth = 3;
context.stroke();
context.restore();
}
function drawBall(context, x, y, rBall) {
context.save();
context.beginPath();
context.arc(x, y, rBall, 0, Math.PI * 2);
context.fill();
context.restore();
}
requestAnimationFrame(draw);
function main ()
{
let intervalID = setInterval("qwert()", 1);
}
</script>
<a href="#" class="button" onclick="main()" >Моделировать </button>
</div>
</html> |