Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Математические функции в калькуляторе (https://javascript.ru/forum/events/64119-matematicheskie-funkcii-v-kalkulyatore.html)

Хан 20.07.2016 20:11
Математические функции в калькуляторе
 
Всем привет! Еще одно сообщение на счет калькулятора, математические функции (синус, косинус и т.д.). Знаю что в js есть объект Math, но пробовал через функции сделать эти кнопки. Не получается. Прошу помочь. Вот код (я только кнопки этих функций добавил, все свои неудачные функции я удалил): 
<!DOCTYPE html>
<html>
<head>
	<title>JavaScript</title>
	<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		function proverka(input) { 
			var value = input.value; 
			var rep = /[;":'a-zA-Zа-яА-Я]/; 
			if (rep.test(value)) { 
				value = value.replace(rep, ''); 
				input.value = value; 
			} 
		} 
		
		  function persent(input) {
			var x = input.value.split("*");
			var y = x[0];
			x = x[1];
			var s = x * y / 100;
			input.value = s
		};

		
		function timer() {
			var s = Number(document.getElementById("timer").innerHTML);
			s++;
			document.getElementById("timer").innerHTML = s;
			setTimeout("timer()", 1000);
		}
	
		function date() {
			var date = new Date();
			var text = date.getFullYear();
			text += ".0" + Number(date.getMonth()+1);
			text += ".1" + date.getDay();
			text += "." + date.getHours();
			text += "." + date.getMinutes();
			text += "." + date.getSeconds();
			document.getElementById("niggus").innerHTML = text;
		}
	</script>
	<style>
		#calc * {font-size: 16px;}
		#calc table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; width: 319px;}
		#calc table td {border-spacing: 3px;}
		input.display {width: 300px; text-align: left; outline: none; color: #000; padding-left: 2px;}	
		input[type= button] {width: 40px; height: 30px; background-color: #EEE; outline: none;}
		input.doit {width: 304px; background-color: #6A5ACD;}
		input.dim{background-color: #A9A9A9;}
		input.gray{background-color: #C0C0C0;}
		input.silver{background-color: #d3d3d3;}
		input.blue{background-color: #d3d3d3;}
		.pp{margin-top: -15px; font-size: 22px; font-weight: bold; color: #00FF00;}
		.p{font-size: 17px; font-weight: bold; color: #00FF00;}
		#timer{font-size: 80px; color: #FF1493; position: relative;}
		#sekundomer {background-color: #000; width: 176px; height: 124px; border: 3px solid silver; text-align: center; margin-left: 419px; margin-top: -198px;}
		#date_nigga {margin-left: 720px; margin-top: -130px;}
	</style>
</head>
<body onload="timer(this), date(this)">
	<form name="calculator" id="calc">
		<table>
			<tr>
				<td>
					<input type="text" name="input" size="16" class="display" disabled placeholder="0" onkeyup="return proverka(this)" onsubmit="Checkform(this)" />
				</td>
			</tr>
			<tr>
				<td class="buttons">
					<input type="button" name="skobka" value="(" class="gray" Onclick="calc.input.value += '('"/>
					<input type="button" name="skobka" value=")" class="gray" Onclick="calc.input.value += ')'"/>
					<input type="button" name="percent" value="%" class="gray" Onclick="persent(calc.input)">
					<input type="button" name="clear" value="C" class="gray" OnClick="calc.input.value = ''"/>
					<input type="button" name="clear_one" value="CE" class="gray" Onclick="calc.input.value = input.value.substring(0, input.value.length - 1)"/>					
					<input type="button" name="sq" value="sq" class="dim" Onclick="" />
					<input type="button" name="asin" value="as" class="dim" Onclick="" />
					<br/>
					<input type="button" name="one" value="1" OnClick="calc.input.value += '1'"/>
					<input type="button" name="two" value="2" OnClick="calc.input.value += '2'"/>
					<input type="button" name="three" value="3" OnClick="calc.input.value += '3'"/>
					<input type="button" name="add" value="+" class="silver" OnClick="calc.input.value += '+'"/>
					<input type="button" name="sub" value="-" class="silver" OnClick="calc.input.value += '-'"/>
					<input type="button" name="exp" value="exp" class="dim" Onclick="">
					<input type="button" name="sqrt" value="sqr" class="dim" Onclick="">
					<br>
					<input type="button" name="four" value="4" OnClick="calc.input.value += '4'">
					<input type="button" name="five" value="5" OnClick="calc.input.value += '5'">
					<input type="button" name="six" value="6" OnClick="calc.input.value += '6'">
					<input type="button" name="mul" value="x" class="silver" OnClick="calc.input.value += '*'"/>
					<input type="button" name="div"  value="/" class="silver" OnClick="addChar(calc.input.value += '/')">
					<input type="button" name="sin" value="sin" class="dim" Onclick="">
					<input type="button" name="cos" value="cos" class="dim" Onclick="if (checkNum(this.calc.value)) { cos(this.calc) }">
					<br>
					<input type="button" name="seven" value="7" OnClick="calc.input.value += '7'">
					<input type="button" name="eight" value="8" OnClick="calc.input.value += '8'">
					<input type="button" name="nine" value="9" OnClick="calc.input.value += '9'">
					<input type="button" name="zero" value="0" OnClick="calc.input.value += '0'"/>
					<input type="button" name="tochka" value="." class="blue" Onclick="calc.input.value += '.'"/>
					<input type="button" name="tan" value="tan" class="dim" Onclick="">
					<input type="button" name="In" value="In" class="dim" Onclick="">
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" name="doit" value="=" class="doit" OnClick="calc.input.value = eval(calc.input.value)"/>
				</td>
			</tr>
		</table>
	</form>
	<div id="sekundomer">
		<br/>
		<span id="timer">-1</span>
		<br/>
	</div>
	<div id="date_nigga">
		<p>Вы зашли на сайт:</p>
		<p id="niggus" ></p>
		<p>Год.Месяц.День.Час.Минута.Секунда</p>
	</div>
</body>
</html>


Заранее спасибо!

рони 20.07.2016 22:46
Хан,
синус ...
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
  <meta charset="utf-8">
  <script>
    function proverka(input) {
      var value = input.value;
      var rep = /[;":'a-zA-Zа-яА-Я]/;
      if (rep.test(value)) {
        value = value.replace(rep, '');
        input.value = value;
      }
    }

      function persent(input) {
      var x = input.value.split("*");
      var y = x[0];
      x = x[1];
      var s = x * y / 100;
      input.value = s
    };
    function Fsin(input) {
      input.value = Math.sin(Math.PI/180*input.value)
    };

    function timer() {
      var s = Number(document.getElementById("timer").innerHTML);
      s++;
      document.getElementById("timer").innerHTML = s;
      setTimeout("timer()", 1000);
    }

    function date() {
      var date = new Date();
      var text = date.getFullYear();
      text += ".0" + Number(date.getMonth()+1);
      text += ".1" + date.getDay();
      text += "." + date.getHours();
      text += "." + date.getMinutes();
      text += "." + date.getSeconds();
      document.getElementById("niggus").innerHTML = text;
    }
  </script>
  <style>
    #calc * {font-size: 16px;}
    #calc table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; width: 319px;}
    #calc table td {border-spacing: 3px;}
    input.display {width: 300px; text-align: left; outline: none; color: #000; padding-left: 2px;}
    input[type= button] {width: 40px; height: 30px; background-color: #EEE; outline: none;}
    input.doit {width: 304px; background-color: #6A5ACD;}
    input.dim{background-color: #A9A9A9;}
    input.gray{background-color: #C0C0C0;}
    input.silver{background-color: #d3d3d3;}
    input.blue{background-color: #d3d3d3;}
    .pp{margin-top: -15px; font-size: 22px; font-weight: bold; color: #00FF00;}
    .p{font-size: 17px; font-weight: bold; color: #00FF00;}
    #timer{font-size: 80px; color: #FF1493; position: relative;}
    #sekundomer {background-color: #000; width: 176px; height: 124px; border: 3px solid silver; text-align: center; margin-left: 419px; margin-top: -198px;}
    #date_nigga {margin-left: 720px; margin-top: -130px;}
  </style>
</head>
<body onload="timer(this), date(this)">
  <form name="calculator" id="calc">
    <table>
      <tr>
        <td>
          <input type="text" name="input" size="16" class="display" disabled placeholder="0" onkeyup="return proverka(this)" onsubmit="Checkform(this)" />
        </td>
      </tr>
      <tr>
        <td class="buttons">
          <input type="button" name="skobka" value="(" class="gray" Onclick="calc.input.value += '('"/>
          <input type="button" name="skobka" value=")" class="gray" Onclick="calc.input.value += ')'"/>
          <input type="button" name="percent" value="%" class="gray" Onclick="persent(calc.input)">
          <input type="button" name="clear" value="C" class="gray" OnClick="calc.input.value = ''"/>
          <input type="button" name="clear_one" value="CE" class="gray" Onclick="calc.input.value = input.value.substring(0, input.value.length - 1)"/>
          <input type="button" name="sq" value="sq" class="dim" Onclick="" />
          <input type="button" name="asin" value="as" class="dim" Onclick="" />
          <br/>
          <input type="button" name="one" value="1" OnClick="calc.input.value += '1'"/>
          <input type="button" name="two" value="2" OnClick="calc.input.value += '2'"/>
          <input type="button" name="three" value="3" OnClick="calc.input.value += '3'"/>
          <input type="button" name="add" value="+" class="silver" OnClick="calc.input.value += '+'"/>
          <input type="button" name="sub" value="-" class="silver" OnClick="calc.input.value += '-'"/>
          <input type="button" name="exp" value="exp" class="dim" Onclick="">
          <input type="button" name="sqrt" value="sqr" class="dim" Onclick="">
          <br>
          <input type="button" name="four" value="4" OnClick="calc.input.value += '4'">
          <input type="button" name="five" value="5" OnClick="calc.input.value += '5'">
          <input type="button" name="six" value="6" OnClick="calc.input.value += '6'">
          <input type="button" name="mul" value="x" class="silver" OnClick="calc.input.value += '*'"/>
          <input type="button" name="div"  value="/" class="silver" OnClick="addChar(calc.input.value += '/')">
          <input type="button" name="sin" value="sin" class="dim" Onclick="Fsin(calc.input)">
          <input type="button" name="cos" value="cos" class="dim" Onclick="">
          <br>
          <input type="button" name="seven" value="7" OnClick="calc.input.value += '7'">
          <input type="button" name="eight" value="8" OnClick="calc.input.value += '8'">
          <input type="button" name="nine" value="9" OnClick="calc.input.value += '9'">
          <input type="button" name="zero" value="0" OnClick="calc.input.value += '0'"/>
          <input type="button" name="tochka" value="." class="blue" Onclick="calc.input.value += '.'"/>
          <input type="button" name="tan" value="tan" class="dim" Onclick="">
          <input type="button" name="In" value="In" class="dim" Onclick="">
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" name="doit" value="=" class="doit" OnClick="calc.input.value = eval(calc.input.value)"/>
        </td>
      </tr>
    </table>
  </form>
  <div id="sekundomer">
    <br/>
    <span id="timer">-1</span>
    <br/>
  </div>
  <div id="date_nigga">
    <p>Вы зашли на сайт:</p>
    <p id="niggus" ></p>
    <p>Год.Месяц.День.Час.Минута.Секунда</p>
  </div>
</body>
</html>

Хан 21.07.2016 11:24
Теперь нужно каждую функцию таким образом что ли делать?

рони 21.07.2016 13:24
Цитата:
Сообщение от Хан
Теперь нужно каждую функцию таким образом что ли делать?
да

Хан 21.07.2016 16:20
Спасибо! Сделал наконец калькулятор! :dance: 
<!DOCTYPE html>
<html>
<head>
	<title>JavaScript</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		function proverka(input) { 
			var value = input.value; 
			var rep = /[;":'a-zA-Zа-яА-Я]/; 
			if (rep.test(value)) { 
				value = value.replace(rep, ''); 
				input.value = value; 
			} 
		} 
		
		  function persent(input) {
			var x = input.value.split("*");
			var y = x[0];
			x = x[1];
			var s = x * y / 100;
			input.value = s;
		}
		
		function sinus(input) {
			input.value = Math.sin(input.value);
		}
		
		function cosinus(input) {
			input.value = Math.cos(input.value);
		}

		function artsinus(input) {
			input.value = Math.asin(input.value);
		}
		
		function artcosinus(input) {
			input.value = Math.acos(input.value);
		}
		
		function Fsqrt(input) {
			input.value = Math.sqrt(input.value);
		}
		
		function tangens(input) {
			input.value = Math.tan(input.value);
		}
		
		function Fexpt(input) {
			input.value = Math.exp(input.value);
		}
		
		function atangens(input) {
			input.value = Math.atan(input.value);
		}
		
		function timer() {
			var s = Number(document.getElementById("timer").innerHTML);
			s++;
			document.getElementById("timer").innerHTML = s;
			setTimeout("timer()", 1000);
		}
	
		function date() {
			var date = new Date();
			var text = date.getFullYear();
			text += ".0" + Number(date.getMonth()+1);
			text += ".1" + date.getDay();
			text += "." + date.getHours();
			text += "." + date.getMinutes();
			text += "." + date.getSeconds();
			document.getElementById("niggus").innerHTML = text;
		}
	</script>
	<style>
		#calc * {font-size: 16px;}
		#calc table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; width: 326px;}
		#calc table td {border-spacing: 3px;}
		input.display {width: 306px; text-align: left; outline: none; color: #000; padding-left: 2px;}	
		input[type= button] {width: 40px; height: 30px; background-color: #EEE; outline: none;}
		input.doit {width: 312px; background-color: #6A5ACD;}
		input.bolshe{background-color: #A9A9A9; width: 44px;}
		input.gray{background-color: #C0C0C0;}
		input.silver{background-color: #d3d3d3;}
		input.blue{background-color: #d3d3d3;}
		.pp{margin-top: -15px; font-size: 22px; font-weight: bold; color: #00FF00;}
		.p{font-size: 17px; font-weight: bold; color: #00FF00;}
		#timer{font-size: 80px; color: #FF1493; position: relative;}
		#sekundomer {background-color: #000; width: 176px; height: 124px; border: 3px solid silver; text-align: center; margin-left: 419px; margin-top: -198px;}
		#date_nigga {margin-left: 720px; margin-top: -130px;}
	</style>
</head>
<body onload="timer(this), date(this)">
	<form name="calculator" id="calc">
		<table>
			<tr>
				<td>
					<input type="text" name="input" size="16" class="display" disabled placeholder="0" onkeyup="return proverka(this)" onsubmit="Checkform(this)" />
				</td>
			</tr>
			<tr>
				<td class="buttons">
					<input type="button" name="skobka" value="(" class="gray" Onclick="calc.input.value += '('"/>
					<input type="button" name="skobka" value=")" class="gray" Onclick="calc.input.value += ')'"/>
					<input type="button" name="percent" value="%" class="gray" Onclick="persent(calc.input)">
					<input type="button" name="clear" value="C" class="gray" OnClick="calc.input.value = ''"/>
					<input type="button" name="clear_one" value="CE" class="gray" Onclick="calc.input.value = input.value.substring(0, input.value.length - 1)"/>					
					<input type="button" name="atan" value="atan" class="bolshe" Onclick="atangens(calc.input)" />
					<input type="button" name="asin" value="asin" class="bolshe" Onclick="artsinus(calc.input)" />
					<br/>
					<input type="button" name="one" value="1" OnClick="calc.input.value += '1'"/>
					<input type="button" name="two" value="2" OnClick="calc.input.value += '2'"/>
					<input type="button" name="three" value="3" OnClick="calc.input.value += '3'"/>
					<input type="button" name="add" value="+" class="silver" OnClick="calc.input.value += '+'"/>
					<input type="button" name="sub" value="-" class="silver" OnClick="calc.input.value += '-'"/>
					<input type="button" name="acos" value="acos" class="bolshe" Onclick="artcosinus(calc.input)">
					<input type="button" name="sqrt" value="sqrt" class="bolshe" Onclick="Fsqrt(calc.input)">
					<br>
					<input type="button" name="four" value="4" OnClick="calc.input.value += '4'">
					<input type="button" name="five" value="5" OnClick="calc.input.value += '5'">
					<input type="button" name="six" value="6" OnClick="calc.input.value += '6'">
					<input type="button" name="mul" value="x" class="silver" OnClick="calc.input.value += '*'"/>
					<input type="button" name="div"  value="/" class="silver" OnClick="calc.input.value += '/'">
					<input type="button" name="sin" value="sin" class="bolshe" Onclick="sinus(calc.input)">
					<input type="button" name="cos" value="cos" class="bolshe" Onclick="cosinus(calc.input)">
					<br>
					<input type="button" name="seven" value="7" OnClick="calc.input.value += '7'">
					<input type="button" name="eight" value="8" OnClick="calc.input.value += '8'">
					<input type="button" name="nine" value="9" OnClick="calc.input.value += '9'">
					<input type="button" name="zero" value="0" OnClick="calc.input.value += '0'"/>
					<input type="button" name="tochka" value="." class="blue" Onclick="calc.input.value += '.'"/>
					<input type="button" name="tan" value="tan" class="bolshe" Onclick="tangens(calc.input)">
					<input type="button" name="expt" value="expt" class="bolshe" Onclick="Fexpt(calc.input)">
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" name="doit" value="=" class="doit" OnClick="calc.input.value = eval(calc.input.value)"/>
				</td>
			</tr>
		</table>
	</form>
	<div id="sekundomer">
		<br/>
		<span id="timer">-1</span>
		<br/>
	</div>
	<div id="date_nigga">
		<p>Вы зашли на сайт:</p>
		<p id="niggus" ></p>
		<p>Год.Месяц.День.Час.Минута.Секунда</p>
	</div>
</body>
</html>

рони 21.07.2016 17:58
Хан,
не пробовали сравнить результат по синусу ваш и во втором сообщении этой темы.
спросите гугл сколько?

Хан 21.07.2016 23:39
У меня сразу высчитывается в радианах, проверял на других инженерных калькуляторах.

рони 21.07.2016 23:54
Цитата:
Сообщение от Хан
У меня сразу высчитывается в радианах
ок


Часовой пояс GMT +3, время: 05:55.