Logo
Create Account
Sign In
Generators
Animated Banners Maker
Animated Images Effects Generator
Button Maker
Web 2.0 Title Generator (Logo)
Web 2.0 Badges Generator
Signature Maker (for forums) online
Avatar Generator for forums (Personal Image)
Image Effects/Filters Generator
Google Maps code Generator
Diagonal Ribbon Generator
Bookmark Buttons Generator
More
More Generators
Referencing (SEO)
Top list/site
Google PageRank Checker
What Search Engines See
Link Extractor
HTTP Header Fields Viewer
Meta Tags Generator
Flash
Free Flv Player in flash (video player)
Flash Web 2.0 Menu Generator
Flash Mp3 Player Generator
Flash Button Maker
Flash Clocks (analog and digital)
Flash Code Generator
Services
Guestbook Service
News System
AJAX Chat service
Survey Service
Comments Module
Vote Service (notation module)
Counters
Global Counter
Visitors Counter
Visits Counter
Pages Views Counter
Clicks Counter
Live Counter
All Scripts and Tutorials
All Web Designs
You are here: Webestools > Scripts and Tutorials > Javascript > Javascript Calculator - Buttons calculator keyboard support operations modulo

Javascript Calculator - Buttons calculator keyboard support operations modulo

My Avatar
ybouane
Javascript Calculator - Buttons calculator keyboard support operations modulo Javascript Calculator - Buttons calculator keyboard support operations modulo
Note : 3/5 (1 vote)
Last modification : 09/08/2010 at 19:35:30
Keywords : javascript calculator buttons calculator keyboard support mathematics operations modulo addition substraction multiplication division reset script function calculator html js
Hi,
This script is a Javascript Calculator valid (X)html strict 1.1 and CSS 2.1. This calculator has buttons and a zone to display the result, she offer various options.

This is a preview of the calculator:

She can do the following mathematic operations:
  • Modulo(%)
  • Additions(+)
  • Substractions(-)
  • Multiplications(x)
  • Divisions(/)
This is other caracteristics of this javascript calculator:
  • Conversion of a positif to a negatif number(also the inserse)
  • Support point numbers
  • Ability to reset (CE)
  • This calculator support keyboard


This calculator is simple, she has a fonction that initialize the calculator when the page is loaded or when the user click on the CE button. She also have a function to add numbers when the user clicks on the buttons and an other to make the mathematic operations. Finaly, there is another function to detect keys when the user uses the keyboard.

This is the codes:
calculator.js
Code: JavaScript
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
        return document.getElementById(id);
}
function f_calc(id,n)
{
        if(n=='ce')
        {
                init_calc(id);
        }
        else if(n=='=')
        {
                if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                {
                        eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                        calc_array[id][0] = '=';
                        $id(id+'_result').value=calcul;
                        calc_array[id][2]=calcul;
                        calc_array[id][3]=0;
                }
        }
        else if(n=='+-')
        {
                $id(id+'_result').value=$id(id+'_result').value*(-1);
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
                pas_ch = 1;
        }
        else if(n=='nbs')
        {
                if($id(id+'_result').value<10 && $id(id+'_result').value>-10)
                {
                        $id(id+'_result').value=0;
                }
                else
                {
                        $id(id+'_result').value=$id(id+'_result').value.slice(0,$id(id+'_result').value.length-1);
                }
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
        }
        else
        {
                        if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                        {
                                eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                                $id(id+'_result').value=calcul;
                                calc_array[id][2]=calcul;
                                calc_array[id][3]=0;
                        }
                        calc_array[id][0] = n;
        }
        if(pas_ch==0)
        {
                calc_array[id][1] = 1;
        }
        else
        {
                pas_ch=0;
        }
        document.getElementById(id+'_result').focus();
        return true;
}
function add_calc(id,n)
{
        if(calc_array[id][1]==1)
        {
                $id(id+'_result').value=n;
        }
        else
        {
                $id(id+'_result').value+=n;
        }
        if(calc_array[id][0]=='=')
        {
                calc_array[id][2] = $id(id+'_result').value;
                calc_array[id][3] = 0;
        }
        else
        {
                calc_array[id][3] = $id(id+'_result').value;
        }
        calc_array[id][1] = 0;
        document.getElementById(id+'_result').focus();
        return true;
}
function init_calc(id)
{
        $id(id+'_result').value=0;
        calc_array[id] = new Array('=',1,'0','0',0);
        document.getElementById(id+'_result').focus();
        return true;
}
function key_detect_calc(id,evt)
{
        if((evt.keyCode>95) && (evt.keyCode<106))
        {
                var nbr = evt.keyCode-96;
                add_calc(id,nbr);
        }
        else if((evt.keyCode>47) && (evt.keyCode<58))
        {
                var nbr = evt.keyCode-48;
                add_calc(id,nbr);
        }
        else if(evt.keyCode==107)
        {
                f_calc(id,'+');
        }
        else if(evt.keyCode==109)
        {
                f_calc(id,'-');
        }
        else if(evt.keyCode==106)
        {
                f_calc(id,'*');
        }
        else if(evt.keyCode==111)
        {
                f_calc(id,'/');
        }
        else if(evt.keyCode==110)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==190)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==188)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==13)
        {
                f_calc(id,'=');
        }
        else if(evt.keyCode==46)
        {
                f_calc(id,'ce');
        }
        else if(evt.keyCode==8)
        {
                f_calc(id,'nbs');
        }
        else if(evt.keyCode==27)
        {
                f_calc(id,'ce');
        }
        return true;
}

calculator.css
Code: CSS
.calculator
{
        width:300px;
        height:300px;
        background-color:#eeeeee;
        border:2px solid #CCCCCC;
        margin:auto;
        padding-left:5px;
        padding-bottom:5px;
}
.calculator td
{
        height:16.66%;
}
.calc_td_result
{
        text-align:center;
}
.calc_result
{
        width:90%;
        text-align:right;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%;
}
.calc_btn
{
        width:90%;
        height:90%;
        font-size:20px;
}

calculator.html
Code: (X)html
<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Javascript Calculator</title>
        <script type="text/javascript" src="calculator.js"></script>
        <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calculator.css" />
    </head>
    <body>
        <table class="calculator" id="calc">
            <tr>
                <td colspan="4" class="calc_td_result">
                    <input type="text" readonly="readonly" name="calc_result" id="calc_result" class="calc_result" onkeydown="javascript:key_detect_calc('calc',event);" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&larr;" onclick="javascript:f_calc('calc','nbs');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
                </td>
            </tr>
                        <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&divide;" onclick="javascript:f_calc('calc','/');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&plusmn;" onclick="javascript:f_calc('calc','+-');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
                document.getElementById('calc').onload=init_calc('calc');
        </script>
    </body>
</html>
Test

I hope this script will be useful.

Similar Scripts and Tutorials:

Comments

Add a Comment





You are currently not logged, some of your informations(like your IP adress) will be saved to avoid spam.
Your message must not contain any web adress or banned words. Otherwise, he will not be sent.

Comments

Sent by kkkbbb the 18/11/2010 at 02:57:00
this calculator do not calculate %
Sent by Test user the 11/06/2011 at 18:29:49
The '/' dos not work...
Sent by akBFrmlVZIImR the 31/07/2011 at 12:04:11
What an awseome way to explain this-now I know everything!
Sent by WeivebuBguive the 19/01/2012 at 17:36:25
buy tramadol no rx tramadol toxicity [url=]what is tramadol comparable to[/url]
tramadol 150 ea tramadol narcotic [url=]tramadol sale no prescription required[/url]
best price for tramadol generic ultram tramadol capsules [url=]buy tramadol now carisoprodol[/url]
compare tramadol and vicodin get tramadol without prescreption [url=]is tramadol a narc[/url]
Sent by efr the 20/01/2012 at 06:42:26
we
Sent by sagenta cummings the 21/05/2012 at 08:40:15
won't work!!!
Sent by kitayshinakom the 09/06/2012 at 18:14:04
грузовые шины Oktyre , SmartStone , Fenglun.
kitayshina.com
Sent by mirniyeugenyi the 12/06/2012 at 19:11:04
Здравствуйте, хочу поделится моей историей и своими впечатлениями от пребывания в циндао китай и от лечения в госпитале Хун чан . Сам проживаю в Якутии г.МИРНЫЙ. Дело в том, что больше 5 лет меня мучили боли спины в поясничном отделе. И когда стало держаться нету больше сил-всерьез задумался о лечении. В нашем городе врачи лечили меня от остеохондроза,но все было не эффективно. Рентген ничего не показывал,а МРТ в то время не работал.Об этой клинике узнал от девушки,которой здесь сделали операцию по удалению межпозвоночной грыжи.Прилетела она другим человеком,ходит с улыбкой на лице и жуткие боли ее не мучают.Так как времени уже не было,заканчивается отпуск,я решил лететь сюда,приготовившись к худшему,но надеясь на лучшее.Было оговорено,что в ПЕКИНЕ меня встречает русскоговорящий гид и пересаживает в самолет на ЦИНДАО.Здесь встречают из клиники и привозят расселяют.Вообщем туда-обратно трансфер.Перелет прошел благополучно,в ПЕКИНЕ мне вклеили двухнедельную визу по приглашению с КИТАЯ,здесь встретила сама доктор ЛЮ,заведующая клиникой.Общение проходило и проходит только через переводчика Евгению.ТАК ЖЕ ЕЙ ОГРОМНОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО за ее труды,доброту,чуткость,внимание,человечность-в любое время суток никогда не отказывала в переводе,покупке продуктов,сопровождению по магазинам, вообщем без нее как без рук.Здесь никто и ничего по-русски не понимают.Врачи и в некоторых ресторанах пытались заговорить со мной по-английски,но увы в английском я совсем не силен.На утро собралось возле меня много врачей,я объяснил,что меня беспокоит,щупали спину,простукивали.В этот день сделали рентген и мрт.МРТ стоит 1000 юаней-около 5000 рублей.Переезжали для снимка в другую клинику.Мои опасения подтвердились-диагноз межпозвонковая грыжа и таких размеров,что все очень удивились как я еще ходил. В Мирном я узнал,что здесь оперицию по удалению грыжи делают через проколы в пояснице под местным наркозом.В РОССИИ такой методике нет-удаляют хирургическим путем,распонахав пол спины и не дают гарантии на осложнения,очень тяжелый реабелетац.период.Дав согласие на операцию я лег на операционный стол.НЕ СКРОЮ-было страшновато-все-таки позвоночник,рядом спинной мозг/будешь потом остаток жизни как овощ и гадить под себя/Операция длилась минут 40-50 не больно,терпимо.Раза два конечно я кайфанул когда видимо цепляли нервы.Будто к спине прикладывали 220 вольт,мышцы спины и ноги сжимались в судороге.В остальном-терпимо.После операции врачи 24 часа запретили вставать-принесли утку.НО КАКОВО БЫЛО МОЕ УДИВЛЕНИЕ,ЧТО Я ВСЕ ТАКИ ВСТАВАЛ И ХОДИЛ В ТУАЛЕТ САМ,за что получил немалый нагоняй от доктора ЛЮ.Где-то 2 дня поясница ныла в области проколов.НО ИСЧЕЗЛА БОЛЬ И ЭТА БОЛЕЗНЕННОЕ НАТЯЖЕНИЕ НЕРВОВ ОТ КОПЧИКА ЧЕРЕЗ ЯГОДИЦЫ В НОГИ.Впечатление будто убрали в пояснице тот больной нервный комок,который причинял боль и все тянул.ХВАЛА ВСЕВЫШНЕМУ,БЛАГОДАРНОСТЬ,ПОЧЕТ И УВАЖЕНИЕ ХИРУРГУ,кстати это супруг доктора ЛЮ.на след.день и каждый день мне делают массаж,иглоукалывание,подсоединяют к иглам динамические токи,рогревают при этом магнитными лампами,и еще какой-то греющий прибор.СЛЕДУЕТ ОТМЕТИТЬ ВЫСОКИЙ ПРОФЕССИАНАЛИЗМ,ПРОЩЕ- ВЫСШИЙ ПИЛОТАЖ ХИРУРГА И ДОКТОРА ЛЮ.Таким людям дается талант свыше,от БОГА.также ОТМЕТИТЬ ЗАБОТУ,ВНИМАНИЕ,ЧУТКОСТЬ к пациенту доктора ЛЮ.Она как мама заботится о своем чаде.Все процедуры делают разные мед.сестры и братья,все происходит в одной большой палате вместе старики и женщины.Никто не стесняется-у них так принято.Прошло 10 дней после операции,но я еще не могу привыкнуть,что не болит спина,могу ходить выпрямившись,лечь или присесть как мне надо.КОРОТКО О ЦИНДАО-город очень большой около 8 млн.жителей.Красивая длинная набережная по которой очень приятно прогуливаться.Кто здесь будет советую посетить океанариум-НЕЗАБЫВАЕМЫЕ ВПЕЧАТЛЕНИЯ-белые медведи,дельфины,котики,пингвины,морские черепахи,акулы билет 150 юаней-750руб.но это стоит этого.В клинике по договоренности заранее меня поселили в отдельную палату,где есть душ,туалет,телевизор с китайским ТВ.-жить можно.Во многих палатах этого нет.Рядом с клиникой много кафешек и ресторанчиков.Раз покушать в кафе-17-20 юанейоколо 100 рублей,в ресторанах раза в три дороже.Пища чисто китайская лапша,рис,много сои,острое.Пиво местное ЦИНЬТАО-бутылка 0.6мл.-4-6 юаней около 25 рублей.Мне понравилось,похоже на МИЛЛЕР.Но очень хочется борщика или жеренной картошечки-здесь такого в меню нет.СУММА ОДНОГО ТОЛЬКО ЛЕЧЕНИЯ ЗА 14 ДНЕЙ 14 000 ЮАНЕЙ,сюда входят все процедуры,операция,мрт,рентген.проживание в клинике 100 юаней сутки-500 РУБЛЕЙ,рядом гостиница 230 юаней сутки.Но кто прилетит летом-заранее позаботьтесь о брони.Летом здесь аншлаг,город курортный.Лечение конечно ДОРОГОЕ,НО ДУМАЮ ДОРОЖЕ ЗДОРОВЬЯ НИЧЕГО НЕТ!!! . БУДЬТЕ ЗДОРОВЫ!!!!!! Если есть вопросы, пишите, постараюсь ответить. ЕВГЕНИЙ.
Sent by KayapeCaw the 04/08/2012 at 15:02:06
ошибся не там создал удалите
Sent by yVrDlUGOO the 22/09/2012 at 14:03:59
I told my grandmother how you hpleed. She said, "bake them a cake!"
Sent by mgmgmgmg the 14/10/2012 at 23:59:47
doesn't evaluate properly

5-6*3 does not = -3

should be -13
Sent by upen the 06/11/2012 at 14:18:40
superb !!!
but % not working.
Sent by jaimin the 15/11/2012 at 21:47:07
NOT WORKING
Sent by ErnWong the 25/11/2012 at 08:25:34
0.1+0.2=0.30000000000000004

You should work around this. (e.g. 0.1+0.2=(1+2)/10=0.3)
Sent by Kasim the 23/01/2013 at 16:34:16
HOW THE FUCK DO YOU MAKE A CALCULATOR WORK IN JAVA YOU DICK!!!
Sent by subbu the 09/02/2013 at 07:12:22
hi
Sent by jjm the 10/02/2013 at 20:27:03
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
Sent by Voynex the 14/02/2013 at 05:44:28
If you need an advanced JavaScript Calculator to evaluate complex math expressions, I Suggest to look at Voynex Calculator. It's written on JavaScript in a good OOP style (I hope ;)) Th source code is not obfuscated so you can read and learn.
Sent by Divide doesn't work the 04/03/2013 at 13:14:31
Try dividing something, it gives you a wrong answer.
Sent by My javascript calculator the 10/03/2013 at 18:32:00
I succasesfully implemented javascript calculator. Enjoy: github.com/javadev/calc
Sent by leonjer the 16/03/2013 at 13:07:49
Sent by vanthong the 01/04/2013 at 17:08:58
thak yur
Sent by omprakashy179@gmail.com the 06/05/2013 at 14:41:39
Please send me easy coding for Calculator for java Script
Sent by hadi the 10/05/2013 at 09:50:44
thanx alot.
you save my time


There is 39 online user(s)
Page generated in 0.003333 seconds
Top
Rules - Contact us - Help us - RSS News
Copyright © Webestools - Any full or partial copy of our creations is prohibited without the permission of it authors.
All quoted trademarks belong to their respective companies.