#javascript #html
#javascript #HTML
Вопрос:
У меня есть этот проект, в нем есть таблица, я хочу иметь возможность изменять числовые значения ячеек с помощью ползунка. Пример: когда для ползунка установлено значение 10, значения ячеек с числами в них должны измениться на уже введенное значение 10 или любое значение, на которое установлен ползунок. Продажи с текстом, не относящимся к США, должны оставаться такими, какие они есть. Кажется, я не могу написать функцию, которая принимает значение ползунка и добавляет это значение в ячейки таблицы.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Другата Слънчева Система</title>
<!-- Зареждане на библиотеката и стиловете -->
<script src="suica.min.js"></script>
<link rel="stylesheet" type="text/css" href="Solar.css">
<!-- основен код -->
<script>
//главна функция, инициализира графичните обекти
function main()
{
//построяване на полето за рисуване
p = new Suica();
background([0,0,0.35]);
//demo(1200,1,0.5);
orbit = document.getElementById('orbit');
var r = orbit;
//построяване на слънцето
star = sphere([0,0,0],30);
star.image = new Suica.Image('2k_sun.jpg');
star.image.scale = [1,1];
star.light = true;
//построяване на меркурий
planet1 = sphere([0,0,0],6);
circle([0,0,0],45).custom({mode:Suica.LINE});
planet1.image = new Suica.Image('2k_mercury.jpg');
planet1.image.scale = [1,1];
//построяване на венера
planet2 = sphere([0,0,0],8);
circle([0,0,0],75).custom({mode:Suica.LINE});
planet2.image = new Suica.Image('2k_venus_atmosphere.jpg');
planet2.image.scale = [1,1];
//построяване на земя
planet3 = sphere([0,0,0],14);
circle([0,0,0],130).custom({mode:Suica.LINE});
planet3.image = new Suica.Image('2k_earth_daymap.jpg');
planet3.image.scale = [1,1];
//построяване на луната
moon1 = sphere([0,0,0],6);
moon1.image = new Suica.Image('2k_moon.jpg');
moon1.image.scale = [1,1];
//построяване ма марс
planet4 = sphere([0,0,0],12);
circle([0,0,0],190).custom({mode:Suica.LINE});
planet4.image = new Suica.Image('2k_mars.jpg');
planet4.image.scale = [1,1];
//построяване на юпитер
planet5 = sphere([0,0,0],25);
circle([0,0,0],280).custom({mode:Suica.LINE});
planet5.image = new Suica.Image('2k_jupiter.jpg');
planet5.image.scale = [1,1];
//построяване на сатурн
planet6 = sphere([0,0,0],22);
circle([0,0,0],340).custom({mode:Suica.LINE});
planet6.image = new Suica.Image('2k_saturn.jpg');
planet6.image.scale = [1,1];
//построяване на уран
planet7 = sphere([0,0,0],18);
circle([0,0,0],400).custom({mode:Suica.LINE});
planet7.image = new Suica.Image('2k_uranus.jpg');
planet7.image.scale = [1,1];
//построяване на нептун
planet8 = sphere([0,0,0],16);
circle([0,0,0],460).custom({mode:Suica.LINE});
planet8.image = new Suica.Image('2k_neptune.jpg');
planet8.image.scale = [1,1];
p.nextFrame = loop;
lookAt( [1500,0,900], [0,0,0], [0,0,1] );
}
//виж лекция 14 движение по дъга
function loop()
{
t = Suica.time;
planet1.center = [(45)*Math.cos(t*3,5),(45)*Math.sin(t*3,5),0];
planet2.center = [75*Math.cos(t*2.5),75*Math.sin(t*2.5),0];
planet3.center[1] = (130)*Math.sin(t*2);
planet3.center[0] = (130)*Math.cos(t*2);
moon1.center[0] = planet3.center[0] 30*Math.cos(4*t);
moon1.center[1] = planet3.center[1] 30*Math.sin(4*t);
planet4.center = [190*Math.cos(t*1.1),190*Math.sin(t*1.1),0];
planet5.center = [280*Math.cos(t*0.8),280*Math.sin(t*0.8),0];
planet6.center = [340*Math.cos(t*0.6),340*Math.sin(t*0.6),0];
planet7.center = [400*Math.cos(t*0.4),400*Math.sin(t*0.4),0];
planet8.center = [460*Math.cos(t*0.2),460*Math.sin(t*0.2),0];
}
//функция за проверка на отговора от задача 1
function comp()
{
var n1 = Number(document.getElementById('num1').value);
if (n1 > 4000 amp;amp; n1 < 5000)
{
alert('Правилен отговор!');
return true;
}
else
{
alert('Грешен отговор!');
return false;
}
}
function show_value2(x)
{
document.getElementById("slider_value2").innerHTML=x;
}
</script>
</head>
<body onload="main()">
<!--Заглавие и подзаглавие -->
<h1>Другата слънчва система</h1>
<h4>Пламен Николаев Велков, Матматика и Информатика задочно, Факултетен № 50449</h4>
<br>
<h3>
Слънчевата система е съставена от астрономически обекти.В средата й се намира Слънето, а около него кръжат небесн тела.
Те включват планетите, планети джуджета, спътници, астероиди, комете, междупланетарен прах и газ.Всички те включително и Слънето
около което обикалят са се сформирали преди около 4,6 милярда години при разпадането на молекулярен облак.
<br>
Осемте планети заемат основната част от масата в слънчевата система. Те обикалят около Слънето в почти кръгови орбити, които лежат на приблизително една равнина - еклиптика.
Планетите се разделят на два основни типа: газови гиганти и планети от земен тип. Вътрешните четири планети са по-малки и са от земен тип, предимно съставени от скали и метал.
Външите четири планети са значилно по-големи от тип газови гиганти съставени предимно от водород и хелий.
<br>
Освен планетите и техните спътници в слънчевата система има и по-малки обекти. Те са концентрирани в две области: Първата е астероиден пояс който се намира между Марс и Юпитер, неговият състав е подобен на планетите от земн тип.
Втората област се намира отвъд орбитата на Нептун - транснептунови обекти. Те са съставени предимно от замръзнали вода, метан и амоняк. Има пет транснептунови обекта които са имат необходимата маса, за да бъдат заобиколени от собствена гравитация.
Те се квалифицират като планети джуджета: Церера, Плутон, Хаумея, Макемаке и Ерида.
Шест от планетите и три планети джуджета имат естествени спътници, а външните планети имат и пръстени съставени от прах и други частици.
<br>
За измерване на разстоянието между обекти в слънчвата система е приета астрономическа единица(съкратено AU, от astronomical unit) със стойност средното разстоянието между Слънцето и Земята(приблизително 150 мил. километра).
Меркурий е най-близко до Слънцето(0,387AU), а най-далечната планета е Нептун(30,068 AU).
</h3>
<!-- -->
<div class="slidecontainer">
Орбитална обикола:<span id="slider_value2" style="color:black;font-weight:bold;"></span><br>
<input type="range" min="-50" max="50" step="10" name="slide" value="0" onchange="show_value2(this.value)">
</div>
<canvas width="1000" height="600" style="border: solid 1px Black;">
</canvas>
<br>
<br>
<h5>
На този етап единствената, известна на астрономията, планетата на която има живот е Земята. Намира се в така наречената обитаема зана на слънчевата система.
В астрономията и астробиологията обитаема зона е област около звезда, в която на повърхността на дадена планета може да има течна вода и достатъчно силно атмосферно налягане.
Областта в която тази зона е базирана на разположението на Земята в слънчевата система и също така количеството лъчиста енергия, която тя получава от Слънцето.
Обитаемата зана е разлина във всяка слънчева система, понеже звездата намираща се в центъра на дадена слънчва система е различна от Слънцето. Има слънца които горят с много по-голяма температута
от нашето и такива с по-ниска температура, която е определящо за обитаемата зона на разглежданата слънчева система.
Понеже течната вода е основополагаща за живот на нашета планета, дори и малки промени в температурана на повърхността могат да имат катастрофален ефект върху биосферата.
С напредването на науката можем да добием представа какви биха били тези променте ако орбитата на Земята се измени от настоящата.
</h5>
<!-- Tаблица с имперични данни за слънчвата система, необходима за решаване на задачи -->
<table border = "1">
<tr>
<th>Планета </th>
<th>Орбитален обикколка (AU) </th>
<th>Средна температура на повърхността(C<sup>o</sup>) </th>
<th>Орбитален период (дни) </th>
</tr>
<tr>
<td>Меркурий</td>
<td>2,406</td>
<td>166,85</td>
<td>87</td>
<tr/>
<tr>
<td>Венера</td>
<td>4,545</td>
<td>463,85</td>
<td>244</td>
</tr>
<tr>
<td>Земя</td>
<td>6,283</td>
<td>13,85</td>
<td>365</td>
</tr>
<tr>
<td>Марс</td>
<td>9,553</td>
<td>-63,15</td>
<td>686</td>
</tr>
<tr>
<td>Юпитер</td>
<td>32,675</td>
<td>-120,15</td>
<td>4335</td>
</tr>
<tr>
<td>Сатурн</td>
<td>59,879</td>
<td>-130,15</td>
<td>10,757</td>
</tr>
<tr>
<td>Уран</td>
<td>120,515</td>
<td>-205,15</td>
<td>30,708</td>
</tr>
<tr>
<td>Нептун</td>
<td>188,925</td>
<td>-220,15</td>
<td>60,224</td>
</tr>
</table>
<h6>Задача 1: С помоща на интерактивния модел на слънчевата система и таблицата, намерете с колко стандартни астрономически единици(AU) трябва да се доближи Земята,
за да започнат да кипят океаните на повърхносста?
<input type="text" id="num1" value="" size="10"> AU
<button onclick="comp()">Провери</button></h6>
<noscript>
</noscript>
</body>
Ответ №1:
Добро пожаловать в stackoverflow.
вот простая реализация с использованием чистого Javascript.
function changeTRdata(numberChange){
var table = document.getElementsByTagName('table')[0];
for (var i = 1, row; row = table.rows[i]; i ) {
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j ) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
if(j==2){
let updateVal = [];
col_arr = col.innerText.split(',');
col_arr.forEach(function(numb){updateVal.push(numberFormat(Number(numb) numberChange,','))})
col.innerText = updateVal.join();
}
else
{
var cellVal = col.innerText.replace(',','');
if(!isNaN(cellVal)){
cellVal = Number(cellVal) numberChange;
col.innerText = numberFormat(cellVal,',');
}
}
}
}
}
function numberFormat(_number, _sep) {
_number = typeof _number != "undefined" ? _number : "";
_number = _number.toString();
_number = _number.replace(new RegExp("^(\d{" (_number.length%3? _number.length%3:0) "})(\d{3})", "g"), "$1 $2").replace(/(d{3}) ?/gi, "$1 ").trim();
if(typeof _sep != "undefined" amp;amp; _sep != " ") {
_number = _number.replace(/s/g, _sep);
}
return _number;
}
function show_value2(x)
{
let oldval =document.getElementById("slider_value2").innerHTML;
let change = Number(x)-Number(oldval);
changeTRdata(change)
document.getElementById("slider_value2").innerHTML=x;
}
вот рабочая демонстрация