-
Notifications
You must be signed in to change notification settings - Fork 1
/
Problema da Caixa.html
149 lines (131 loc) · 3.5 KB
/
Problema da Caixa.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Volume para Caixa</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #747474; /* Branco */
}
#container {
border: 2px solid #3498db;
border-radius: 10px;
background-color: #ffffff; /* Cinza escuro */
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 800px;
}
h1 {
color: #3498db;
}
label {
font-size: 1.2em;
margin-right: 10px;
display: block;
margin-bottom: 10px;
}
input {
padding: 8px;
font-size: 1em;
width: 200px;
box-sizing: border-box;
margin-bottom: 20px;
}
button {
padding: 12px;
font-size: 1em;
background-color: #0dac4a;
color: rgb(255, 255, 255);
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
p {
font-size: 1.2em;
margin-top: 20px;
color: #3498db;
}
#result {
color: #3498db;
font-weight: bold;
border: 2px solid #3498db;
padding: 10px;
display: inline-block;
background-color: #ffffff;
}
canvas {
max-width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<h1>O Problema da Caixa</h1>
<label for="inputSize">Tamanho do quadrado original (m):</label>
<input type="number" id="inputSize" step="0.01" min="0">
<br>
<button onclick="calculateVolume()">Calcular</button>
<p>Maior volume de caixa possível: <span id="result"></span></p>
<canvas id="myChart"></canvas>
</div>
<script>
function calculateVolume() {
const size = parseFloat(document.getElementById('inputSize').value);
if (size <= 0) {
alert('Por favor, insira um valor válido para o tamanho do quadrado original.');
return;
}
const xValues = [];
const volumeValues = [];
let maxX = 0;
let maxY = 0;
for (let x = 0; x <= size / 2; x += 0.01) {
const volume = x * Math.pow((size - 2 * x), 2);
xValues.push(x.toFixed(4));
volumeValues.push(volume.toFixed(4));
// Encontrar o ponto máximo
if (volume > maxY) {
maxY = volume;
maxX = x.toFixed(4);
}
}
const resultElement = document.getElementById('result');
resultElement.textContent = maxY.toFixed(4) + " m³";
// Adicionando o gráfico de linha
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xValues,
datasets: [{
label: 'Volume (m³)', fontColor: '#ffffff',
data: volumeValues,
borderColor: '#3498db',
borderWidth: 2,
pointBackgroundColor: '#646464',
fill: false,
fontColor: '#ffffff'
}]
}
});
ctx.beginPath();
ctx.moveTo((maxX * 100), 0);
ctx.lineTo((maxX * 100), myChart.scales['y'].max);
ctx.strokeStyle = '#95a5a6';
ctx.lineWidth = 2;
ctx.stroke();
}
</script>
</body>
</html>