Задание для mishka2 и psywalker (и не только)

Great Rash · September 2, 2009

Задание:

Сделать калькулятор.

Описание:

1) поле ввода цифр - одно

2) Функционал - все стандартные арифметические операции (сложение, вычитание и т.д.), плюс тригонометрия (синус, косинус и т.п.), плюс возведение в степень (любую). (дальше видно будет)

3) дизайн - любой (должно же быть поле для творчества).

4) результат операции выводим в то же поле, в каком вводим цифры.

5) в последствии возможен ввод с клавы.

UPD:

справочную информацию можно найти тут: http://www.w3schools.com/jS/

Edited September 2, 2009 by Great Rash

mishka · September 4, 2009

Убрал я его... Так как несмог победить.

Если поставить то немогу добраться до него джсом

это кстати неправильно в XHTML

надо <input type="text" name="test" value="12345" disabled="disabled" />

у меня браузер ff 3.0.13

дисаблед хочу применить для того чтобы нельзя было мышкой менять положение курсора. Знаю что это вызовет некоторые неудобства, но это значительно может упростить код. Если неполучится победить дисаблед, то думаю сверху прозрачным елементом на абсолюте накрыть дисплей.

как при клике на какойто елемент инпуту фокус сделать? джсом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>calculator</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		html,body{
			height:100%;
			width:100%;
			display:table;
		}
		body{
			margin:0;
			vertical-align:middle;
			display:table-cell;
		}
		#calc{
			font:11px/19px Geneva,Tahoma,Arial,sans-serif;
			width:260px;
			border:3px solid #435CA8;
			background:#ECE9D8;
			margin:0 auto;
			padding:0 0 7px;
			cursor:default;
			position:relative;
			-moz-user-select:none;
			-khtml-user-select:none;
			user-select:none;
			/*opacity:0.5;*/
		}
		/*#calc.calcActive{
			opacity:1;
		}*/
		.calcTitle{
			background:#00006D;
			color:#fff;
			padding:0 10px 2px;
			position:relative;
		}
		#calcNavigation{
			margin:0;
			padding:1px;
			list-style:none;
			border-bottom:1px solid #fff;
		}
		#calcNavigation:after{
			content:"";
			display:block;
			clear:both;
		}
		#calcNavigation li{
			float:left;
			padding:0 6px;
			cursor:default;
			position:relative;
		}
		#calcNavigation li:hover{
			border:1px solid #dedede;
			background:#ebebeb;
			margin:-1px;
			color:#005ad9;
		}
		#display{
			display:block;
			width:225px;
			margin:2px auto 0;
			border-width:1px;
			border-style:solid;
			border-color:#aca899 #fdf9ea #fdf9ea #aca899;
			text-align:right;
			padding:3px 6px 4px;
			background:#fff;
			color:#000;
			cursor:default;
			font:14px "Courier New",Courier,monospace;
		}
		#keyboard{
			overflow:hidden;
			margin:10px 8px 0;
		}
		.key{
			width:33px;
			height:25px;
			overflow:hidden;
			border:2px outset #ccc;
			background:#e3ddd1;
			margin:4px 3px 0 0;
			text-align:center;
			font:12px/24px Geneva,Tahoma,Arial,sans-serif;
			color:#00f;
			position:relative;
		}
		.key:active{
			border:2px inset #ccc;
			height:24px;
			padding:1px 0 0;
		}
		.red{
			color:#f00;
		}
		.managekey{
			width:60px;
		}
		td{
			vertical-align:top;
		}
		.overlay{
			position:absolute;
			top:0;
			left:0;
			/*width:100%;
			height:100%;*/
			overflow:hidden;
			text-indent:-9999px;
		}
		#calc.calcActive .overlay{
			display:none;
		}
	</style>
	<script type="text/javascript">
		function initScript(){
			var _calculator=document.getElementById('calc');
			var _display=document.getElementById('display');

			_calculator.onclick=function(){
				if (this.className.indexOf('calcActive')!=-1){
					this.className=this.className.replace('calcActive','');
				}
				this.className+=' calcActive';
			}

			displayClier=function(){
				_display.value='0,';
				if(_display.className.indexOf('comma')!=-1){
					_display.className=_display.className.replace('comma','');
				}
			}
			displayBackspace=function(){
				_display.value = _display.value.substr(0, _display.value.length - 1);
			}
			_comma=function(){
				if(_display.className.indexOf('comma')!=-1){
					_display.className=_display.className.replace('comma','');
				}
				_display.className+=' comma';
			}
			paste=function(number){
				if(_display.value.length<26){
					if(_display.value=='0,'){
						_display.value=number+',';
					}else{
						if(_display.className.indexOf('comma')<0){
							if(_display.value.lastIndexOf(',')!=-1){
								_display.value=_display.value.replace(',','');
							}
							_display.value+=number+',';
						}else{
							_display.value+=number;
						}
					}
				}
			}
		}


		if (window.addEventListener)
			window.addEventListener("load", initScript, false);
		else if (window.attachEvent)
			window.attachEvent("onload", initScript);
	</script>
</head>
<body>
<div id="calc">
	<div class="calcTitle">
		<strong>WebCalculator v0.1b</strong>
	</div>
	<ul id="calcNavigation">
		<li>Правка</li>
		<li>Вид</li>
		<li>Справка</li>
	</ul>
	<input id="display" type="text" maxlength='26' value='0,' disabled='disabled' />
	<div id="keyboard">
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td>
					<table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td align="center">
								<div style="width:25px;height:24px;margin:6px 0 1px;border-width:1px;border-style:solid;border-color:#aca899 #fff #fff #aca899"><div style="width:23px;height:22px;border-width:1px;border-style:solid;border-color:#716f64 #f1efe2 #f1efe2 #716f64"></div></div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">MC</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red"> MR</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">MS</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">M+</div>
							</td>
						</tr>
					</table>
				</td>
				<td style="padding:0 0 0 6px">
					<table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td>
								<div class="managekey key red" onclick="displayBackspace()">Backspace</div>
							</td>
							<td>
								<div class="managekey key red">CE</div>
							</td>
							<td>
								<div class="managekey key red" onclick='displayClier()'>C</div>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<table cellspacing="0" cellpadding="0" border="0">
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>7</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>8</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>9</div>
										</td>
										<td>
											<div class="key red">/</div>
										</td>
										<td>
											<div class="key">sqrt</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>4</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>5</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>6</div>
										</td>
										<td>
											<div class="key red">*</div>
										</td>
										<td>
											<div class="key">%</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>1</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>2</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>3</div>
										</td>
										<td>
											<div class="key red">-</div>
										</td>
										<td>
											<div class="key">1/x</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>0</div>
										</td>
										<td>
											<div class="key">+/-</div>
										</td>
										<td>
											<div class="key" onclick='_comma()'>,</div>
										</td>
										<td>
											<div class="key red">+</div>
										</td>
										<td>
											<div class="key red">=</div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<span class="overlay"> </span>
</div>
</body>
</html>

при клике на запятую я инпуту класс хочу дописать

Great Rash · September 4, 2009

как при клике на какойто елемент инпуту фокус сделать? джсом

element.onclick = function() {
	input.focus();
}

это кстати неправильно в XHTML
надо <input type="text" name="test" value="12345" disabled="disabled" />

Вообще на W3C написано, что просто disabled нельзя писать в XML 1.0, про XHTML я ни слова не нашел, и даже наоборот:

Some HTML user agents are unable to interpret boolean attributes when these appear in their full (non-minimized) form, as required by XML 1.0. Note this problem doesn't affect user agents compliant with HTML 4. The following attributes are involved: compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.

UPD: Так я и не понял в чем проблема с дизаблед. У меня на тестовой странице все ОК.

Edited September 4, 2009 by Great Rash

mishka · September 4, 2009

Вообще на W3C написано, что просто disabled нельзя писать в XML 1.0, про XHTML я ни слова не нашел, и даже наоборот:

проверь валидатором

что меняет класс? хм... что же у меня ему нехватает?

mishka · September 4, 2009

Насчет дисабледа и класса - все работает, просто фаербаг неотображает, а работает все так как я хотел

mishka · September 4, 2009

Как узнать последний символ строки?

Тоесть я хочу сделать проверку: если у строки последний символ - ',' (запятая) то выполнять ф-цию...

ZoNT · September 4, 2009

Эх, была тут года полтора назад тема страниц на 15, мы там калькулятор на спор кто меньше сделает писали с одним упёртым товарищем... Найти не могу... Наверное после того как форум конкретно падал с тех пор тема затерялась...

Правда по заданию он нифига считать не мог, но зато получался файл меньше килобайта по-моему...

Great Rash · September 4, 2009

Пишу параллельно свой, пока размер 6 килобайт. Научил считать пока только простые операции (сложение, вычитание. умножение и деление). Выдает результат как по нажатию на кнопку операции (например "плюс"), так и на "равно".

Дальше пойдет основной гемор - если делать как виндовый, то самое сложное в нем - работа с памятью(MC, MR, MS). Кстати, как эти клавиши работают кто-нить знает?

mishka · September 4, 2009

Great Rash

Предлагаю перейти на "ТЫ"

Про меня назабывай, ведь обещал помочь.

Как узнать последний символ строки?

Тоесть я хочу сделать проверку: если у строки последний символ - ',' (запятая) то выполнять ф-цию...

s0rr0w · September 4, 2009

Фигасе вы жжоте. eval отменили уже?

mishka · September 4, 2009

Фигасе вы жжоте. eval отменили уже?

Да если бы я знал хотябы что применили... Я ток вот учусь. Можна поподробнее про eval?

Great Rash · September 4, 2009

Фигасе вы жжоте. eval отменили уже?

Ась?

Как узнать последний символ строки?

var str = 'some string';
alert(str.charAt(str.length - 1));
// или
alert(str[str.length - 1]);

UPD:

Можна поподробнее про eval?

eval вычисляет какое-то выражение внутри себя

например:

var a = 1;
var b = 2;
var operand = '+';

alert(a + operand + b); // получится 1+2
alert(eval(a + operand + b)); // получится 3

Не соображу как к калькулятору eval применить...

Edited September 4, 2009 by Great Rash

psywalker · September 4, 2009

Great Rash

Наконец-то ты эксперт, давно пора уже)))))

s0rr0w · September 4, 2009

var str = 'some string';
alert(str.charAt(str.length));

Всегда будет "".

Great Rash · September 4, 2009

psywalker

Старалсо, набивал як мог

s0rr0w

Уже поправил

mishka · September 4, 2009

Great Rash спасибо за объяснение

s0rr0w мне ненадо eval так как я не знаки арифметических действий вылавливаю, а проверяю наличие запятой. (Если я вас правильно понял)

Edited September 4, 2009 by mishka2

s0rr0w · September 4, 2009

Не соображу как к калькулятору eval применить...

Формируете массив операций и операндов. Этот массив превращаете потом в строку и скармливаете eval. Результат вычисления выводите на экран.

Sign In

Задание для mishka2 и psywalker (и не только)

Question

Link to comment

Share on other sites

41 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information