Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Kalkulator

    Загружено:

    OssaKusdiana
    14 просмотров5 страниц
    The document contains the code for building a basic HTML calculator with CSS styling. It includes the HTML, CSS, and JavaScript code to display the calculator interface and make the buttons functional for performing basic math operations. The JavaScript code handles number and operator input, evaluation of equations, and clearing the display screen.

    Исходное описание:

    Kalkulator

    Оригинальное название

    Kal Kula Tor

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    The document contains the code for building a basic HTML calculator with CSS styling. It includes the HTML, CSS, and JavaScript code to display the calculator interface and make the buttons functional for performing basic math operations. The JavaScript code handles number and operator input, evaluation of equations, and clearing the display screen.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    14 просмотров5 страниц

    Kalkulator

    Загружено:

    OssaKusdiana
    The document contains the code for building a basic HTML calculator with CSS styling. It includes the HTML, CSS, and JavaScript code to display the calculator interface and make the buttons functional for performing basic math operations. The JavaScript code handles number and operator input, evaluation of equations, and clearing the display screen.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 5

    HTML Kalkulator

    <html>
    <head>
    <title>kalkulator</title>
    <link rel=”stylesheet” href=”styleku.css” type=”text/css”>
    </head>

    <body bgcolor =”#d3465d”>

    <html>
    <head>
    <style type="text/css">

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font: bold 14px Arial, sans-serif;


    }

    html {
    height: 100%;
    background: white;
    background: radial-gradient(circle, #E6E6FA 20%, #ccc);
    background-size: cover;
    }

    #calculator {
    width: 325px;
    height: auto;

    margin: 10px auto;


    padding: 20px 20px 9px;

    background: #008000;
    background: linear-gradient(#008000, #ADFF2F);
    border-radius: 3px;
    box-shadow: 0px 4px #808080, 0px 10px 15px rgba(0, 0, 0, 0.2);
    }

    .top span.clear {
    float: left;
    }

    .top .screen {
    height: 40px;
    width: 212px;
    float: right;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
    font-size: 17px;
    line-height: 40px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: right;
    letter-spacing: 1px;
    }

    .keys, .top {overflow: hidden;}


    .keys span, .top span.clear {
    float: left;
    position: relative;
    top: 0;

    cursor: pointer;

    width: 66px;
    height: 36px;

    background: Lightseagreen;
    border-radius: 3px;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

    margin: 0 7px 11px 0;

    color: #888;
    line-height: 36px;
    text-align: center;

    user-select: none;
    transition: all 0.2s ease;
    }
    .keys span.operator {
    background: #87CEEB;
    margin-right: 0;
    }

    .keys span.eval {
    background: #00FF7F;
    box-shadow: 0px 4px #9da853;
    color: #888e5f;
    }

    .top span.clear {
    background: #40E0D0;
    box-shadow: 0px 4px #708090;
    color: white;
    }

    /* Some hover effects */


    .keys span:hover {
    background: #9c89f6;
    box-shadow: 0px 4px #6b54d3;
    color: white;
    }

    .keys span.eval:hover {
    background: #abb850;
    box-shadow: 0px 4px #717a33;
    color: #ffffff;
    }

    .top span.clear:hover {
    background: #f68991;
    box-shadow: 0px 4px #d3545d;
    color: white;
    }

    .keys span:active {
    box-shadow: 0px 0px #6b54d3;
    top: 4px;
    }

    .keys span.eval:active {
    box-shadow: 0px 0px #717a33;
    top: 4px;
    }

    .top span.clear:active {
    top: 4px;
    box-shadow: 0px 0px #d3545d;
    }
    </style>
    </head>
    <body>
    <div id="calculator">
    <!-- Screen and clear key -->
    <div class="top">
    <span class="clear">C</span>
    <div class="screen"></div>
    </div>

    <div class="keys">
    <!-- operators and other keys -->
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span class="operator">+</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="operator">-</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="operator">÷</span>
    <span>0</span>
    <span>.</span>
    <span class="eval">=</span>
    <span class="operator">x</span>
    </div>
    </div>

    <!-- PrefixFree -->


    <script type="text/javascript">
    var keys = document.querySelectorAll('#calculator span');
    var operators = ['+', '-', 'x', '÷'];
    var decimalAdded = false;

    for(var i = 0; i < keys.length; i++) {


    keys[i].onclick = function(e) {
    var input = document.querySelector('.screen');
    var inputVal = input.innerHTML;
    var btnVal = this.innerHTML;
    if(btnVal == 'C') {
    input.innerHTML = '';
    decimalAdded = false;
    }

    else if(btnVal == '=') {


    var equation = inputVal;
    var lastChar = equation[equation.length - 1];
    equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
    if(operators.indexOf(lastChar) > -1 || lastChar == '.')
    equation = equation.replace(/.$/, '');

    if(equation)
    input.innerHTML = eval(equation);

    decimalAdded = false;
    }

    else if(operators.indexOf(btnVal) > -1) {


    var lastChar = inputVal[inputVal.length - 1];
    if(inputVal != '' && operators.indexOf(lastChar) == -1)
    input.innerHTML += btnVal;
    else if(inputVal == '' && btnVal == '-')
    input.innerHTML += btnVal;
    if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
    input.innerHTML = inputVal.replace(/.$/, btnVal);
    }
    decimalAdded =false;
    }
    else if(btnVal == '.') {
    if(!decimalAdded) {
    input.innerHTML += btnVal;
    decimalAdded = true;
    }
    }
    else {
    input.innerHTML += btnVal;
    }
    e.preventDefault();
    }
    }
    </script>
    </body>
    </html>

    Вам также может понравиться

    • Freebitco - in Roll Verifier
      Документ54 страницы
      Freebitco - in Roll Verifier
      sandeepkhandayatray
      Оценок пока нет
    • Javascript Cheat Sheet
      Документ43 страницы
      Javascript Cheat Sheet
      20COB153 PRABHAT SINGH
      Оценок пока нет
    • Freebitco - in Stat
      Документ6 страниц
      Freebitco - in Stat
      Алексей Кляхин
      Оценок пока нет
    • Top Python Interview Questions and Answers
      Документ17 страниц
      Top Python Interview Questions and Answers
      Uniformatter
      Оценок пока нет
    • Temporary Email. Email For 10 Minutes or More. Our Service Offers Disposable Email For Registrations
      Документ14 страниц
      Temporary Email. Email For 10 Minutes or More. Our Service Offers Disposable Email For Registrations
      Mar
      Оценок пока нет
    • Browser Cus Part 4
      Документ119 страниц
      Browser Cus Part 4
      Fin Technet
      100% (2)
    • Siebel Escript Tutorial
      Документ8 страниц
      Siebel Escript Tutorial
      vinayguptha
      Оценок пока нет
    • Angular Nonprinting
      Документ388 страниц
      Angular Nonprinting
      Luis Antony Meza
      100% (1)
    • Iwp Lab Cse3002 Labda3: Code-Index - HTML
      Документ15 страниц
      Iwp Lab Cse3002 Labda3: Code-Index - HTML
      Ved Prakash Jain
      Оценок пока нет
    • Harshada Girase - AI - A2
      Документ6 страниц
      Harshada Girase - AI - A2
      bhamrekomal2003
      Оценок пока нет
    • Java Script Calculator: Sanjay M
      Документ11 страниц
      Java Script Calculator: Sanjay M
      Sanjay Muthu
      Оценок пока нет
    • Build A Roman Numeral Converter
      Документ5 страниц
      Build A Roman Numeral Converter
      John Kesh Mahugu
      Оценок пока нет
    • Math Game Source Code
      Документ11 страниц
      Math Game Source Code
      malik
      Оценок пока нет
    • Math Game Source Code
      Документ11 страниц
      Math Game Source Code
      O.V.Srikanth
      Оценок пока нет
    • Math Game Source Code PDF
      Документ11 страниц
      Math Game Source Code PDF
      dhfjsd
      Оценок пока нет
    • Cla Culat or
      Документ3 страницы
      Cla Culat or
      karanbankar54
      Оценок пока нет
    • Web Programming Surya
      Документ59 страниц
      Web Programming Surya
      Aswath Vikranth
      Оценок пока нет
    • MP 3
      Документ72 страницы
      MP 3
      shruthi_123v
      Оценок пока нет
    • Puja Girase - AI - A2
      Документ6 страниц
      Puja Girase - AI - A2
      bhamrekomal2003
      Оценок пока нет
    • Print Ready
      Документ31 страница
      Print Ready
      kishoremj
      Оценок пока нет
    • 19BCE2183 IWP Lab Fat Index - PHP: Include ?
      Документ11 страниц
      19BCE2183 IWP Lab Fat Index - PHP: Include ?
      Ved Prakash Jain
      Оценок пока нет
    • Ex 4
      Документ13 страниц
      Ex 4
      Sri Venkateswara Print Point
      Оценок пока нет
    • Lab 8 Record
      Документ6 страниц
      Lab 8 Record
      HARIKRISHNAN R
      Оценок пока нет
    • Aquí Hay Mas Código de Estilos
      Документ21 страница
      Aquí Hay Mas Código de Estilos
      Jerson Ramirez Ortiz
      Оценок пока нет
    • FKJDJGKGLKFHJCHCHJJHJKVJGKCHCHJCHJ
      Документ12 страниц
      FKJDJGKGLKFHJCHCHJJHJKVJGKCHCHJCHJ
      bouchramaghlaoui75
      Оценок пока нет
    • Webtech 210321190358
      Документ44 страницы
      Webtech 210321190358
      Anil Vastav
      Оценок пока нет
    • ARM Old
      Документ39 страниц
      ARM Old
      Gangadhar L
      Оценок пока нет
    • Home Gratis
      Документ13 страниц
      Home Gratis
      Bisma Cadae
      Оценок пока нет
    • Admin
      Документ5 страниц
      Admin
      HI Kingdom
      Оценок пока нет
    • Build A Palindrome Checker
      Документ4 страницы
      Build A Palindrome Checker
      marekwieszjakjest
      Оценок пока нет
    • Graphical Calculator
      Документ4 страницы
      Graphical Calculator
      Muskan agarwal
      Оценок пока нет
    • 3
      Документ2 страницы
      3
      Saif Jutt
      Оценок пока нет
    • IT Practicals
      Документ18 страниц
      IT Practicals
      108 Anirban
      Оценок пока нет
    • Freebitco in
      Документ8 страниц
      Freebitco in
      Gayan Sankalpa
      Оценок пока нет
    • Ice&Mod
      Документ24 страницы
      Ice&Mod
      juan steban madrigal diaz
      Оценок пока нет
    • 1
      Документ2 страницы
      1
      Saif Jutt
      Оценок пока нет
    • <html>.txt
      Документ8 страниц
      <html>.txt
      Ipo Apa
      Оценок пока нет
    • WTL
      Документ25 страниц
      WTL
      Harshit Dhumal
      Оценок пока нет
    • Webcode
      Документ18 страниц
      Webcode
      Paras Gupta
      Оценок пока нет
    • Teste HTML
      Документ12 страниц
      Teste HTML
      KALEB AUGUSTO MORAIS DE SOUSA
      Оценок пока нет
    • F3 Mock Interview
      Документ15 страниц
      F3 Mock Interview
      vignesh waran
      Оценок пока нет
    • Fracciones
      Документ3 страницы
      Fracciones
      José Alejandro Hernández
      Оценок пока нет
    • Script Deface Keren Text Bergerak! by Skynet404found
      Документ121 страница
      Script Deface Keren Text Bergerak! by Skynet404found
      muharom al rosyid
      Оценок пока нет
    • Nalasoacalc
      Документ5 страниц
      Nalasoacalc
      Rianala Manantsoa
      Оценок пока нет
    • Web Engineering Practical PDF
      Документ43 страницы
      Web Engineering Practical PDF
      Ali ahmad
      Оценок пока нет
    • Coding
      Документ14 страниц
      Coding
      aras rizki ramadhanu
      Оценок пока нет
    • Website
      Документ189 страниц
      Website
      reymart
      Оценок пока нет
    • Wtminiproject
      Документ22 страницы
      Wtminiproject
      1814 Rutwik Ingawale
      Оценок пока нет
    • Tugas Buatlah Kalkulator Sederhana
      Документ6 страниц
      Tugas Buatlah Kalkulator Sederhana
      TANTULAR RESCUE
      Оценок пока нет
    • 2
      Документ2 страницы
      2
      Saif Jutt
      Оценок пока нет
    • Caluclator
      Документ5 страниц
      Caluclator
      AbdulkhadarJilani Shaik
      Оценок пока нет
    • Program 1: Develop & Demonstrate A XHTML Document That Illustrates The Use of External Style Sheet, Ordered List, Table, Borders, Padding, Color & The Tag. m1.html
      Документ26 страниц
      Program 1: Develop & Demonstrate A XHTML Document That Illustrates The Use of External Style Sheet, Ordered List, Table, Borders, Padding, Color & The Tag. m1.html
      Aravindraj Desai
      Оценок пока нет
    • New Text Document
      Документ2 страницы
      New Text Document
      saied mostafa
      Оценок пока нет
    • RT
      Документ72 страницы
      RT
      No Excuse
      Оценок пока нет
    • ETE
      Документ10 страниц
      ETE
      Achal Kumar
      Оценок пока нет
    • Lab 05
      Документ8 страниц
      Lab 05
      MuhammadMuaaz Khalid
      Оценок пока нет
    • Build A Palindrome Checker
      Документ4 страницы
      Build A Palindrome Checker
      John Kesh Mahugu
      Оценок пока нет
    • Untitled
      Документ36 страниц
      Untitled
      Aya Hynek
      Оценок пока нет
    • IT Essentials
      Документ11 страниц
      IT Essentials
      srii21rohith
      Оценок пока нет
    • Dode
      Документ9 страниц
      Dode
      孙培
      Оценок пока нет
    • 4
      Документ1 страница
      4
      Saif Jutt
      Оценок пока нет
    • Ghost Consle 3.4
      Документ21 страница
      Ghost Consle 3.4
      laura tanya lee
      Оценок пока нет
    • List Novel
      Документ6 страниц
      List Novel
      simpann.satuu
      Оценок пока нет
    • CSS for Hotel Bookings
      От Everand
      CSS for Hotel Bookings
      Abdelfattah Ragab
      Оценок пока нет
    • Angular Portfolio App Development: Building Modern and Engaging Portfolios
      От Everand
      Angular Portfolio App Development: Building Modern and Engaging Portfolios
      Abdelfattah Ragab
      Оценок пока нет
    • Sikaflex Pro 3 WF - Pds en PDF
      Документ4 страницы
      Sikaflex Pro 3 WF - Pds en PDF
      OssaKusdiana
      Оценок пока нет
    • Harga Wiremesh
      Документ1 страница
      Harga Wiremesh
      OssaKusdiana
      Оценок пока нет
    • Daily Report Wash Bore (Draw Update 18.08.2017)
      Документ1 страница
      Daily Report Wash Bore (Draw Update 18.08.2017)
      OssaKusdiana
      Оценок пока нет
    • Logo Lift
      Документ1 страница
      Logo Lift
      OssaKusdiana
      Оценок пока нет
    • Logo Lift 2
      Документ1 страница
      Logo Lift 2
      OssaKusdiana
      Оценок пока нет
    • Absen Harian k3 (Manual)
      Документ2 страницы
      Absen Harian k3 (Manual)
      OssaKusdiana
      Оценок пока нет
    • Proyek The Grove Apartment & Media Walk Rasuna Epicentrum
      Документ1 страница
      Proyek The Grove Apartment & Media Walk Rasuna Epicentrum
      OssaKusdiana
      Оценок пока нет
    • 2 Ways To Get Total Sum of Interactive Grid Column Oracle APEX - Ontoor Blogs
      Документ9 страниц
      2 Ways To Get Total Sum of Interactive Grid Column Oracle APEX - Ontoor Blogs
      sulimankareem
      Оценок пока нет
    • Installation Jenkin and Docker and Kubernetes
      Документ4 страницы
      Installation Jenkin and Docker and Kubernetes
      essaiesmeriam
      Оценок пока нет
    • Week-04Assignment MCQ
      Документ5 страниц
      Week-04Assignment MCQ
      Pawan Nani
      Оценок пока нет
    • An Introduction To AJAX PDF
      Документ4 страницы
      An Introduction To AJAX PDF
      Greg
      Оценок пока нет
    • Links Automation
      Документ4 страницы
      Links Automation
      Kavitha
      Оценок пока нет
    • Pdf&rendition 1
      Документ26 страниц
      Pdf&rendition 1
      Nobita Nobi
      Оценок пока нет
    • Web Programming With Python and Javascript
      Документ66 страниц
      Web Programming With Python and Javascript
      Moudi Mouhamadou
      Оценок пока нет
    • Sec20-Lehmann
      Документ19 страниц
      Sec20-Lehmann
      Het Bhavin Patel
      Оценок пока нет
    • Sample Report
      Документ32 страницы
      Sample Report
      Yash Sancheti
      Оценок пока нет
    • Java Lesson Plan
      Документ3 страницы
      Java Lesson Plan
      Sathish Allu
      Оценок пока нет
    • Salon Admin Changeimage
      Документ7 страниц
      Salon Admin Changeimage
      Tahmina Aktar Annei
      Оценок пока нет
    • Angular 11: by Chandan Naresh Technical Consultant
      Документ25 страниц
      Angular 11: by Chandan Naresh Technical Consultant
      Chandan Naresh
      Оценок пока нет
    • Betting Documentation 1 3
      Документ70 страниц
      Betting Documentation 1 3
      robel rago
      Оценок пока нет
    • JS1
      Документ5 страниц
      JS1
      meryroselicaros525
      Оценок пока нет
    • L01 Introduction Programming Languages
      Документ54 страницы
      L01 Introduction Programming Languages
      Abdul Jami Ruhani
      Оценок пока нет
    • Manoj Resume
      Документ7 страниц
      Manoj Resume
      Stan Kplan
      Оценок пока нет
    • Data Final
      Документ4 страницы
      Data Final
      Dmitry Bolgarin
      Оценок пока нет
    • Coding in Javascript
      Документ29 страниц
      Coding in Javascript
      John Kiarie
      Оценок пока нет
    • Report On User Defined Functions in Python
      Документ3 страницы
      Report On User Defined Functions in Python
      Dev Ranjan Raut
      Оценок пока нет
    • KumarShivendu - CV Software Development Qdrant Germany
      Документ1 страница
      KumarShivendu - CV Software Development Qdrant Germany
      g2500110012
      Оценок пока нет
    • Yes
      Документ36 страниц
      Yes
      Venkatesh .V
      Оценок пока нет
    • Csharp Ebook
      Документ338 страниц
      Csharp Ebook
      Kamal Mittal
      Оценок пока нет
    • Computer Science # 01: Assignment
      Документ5 страниц
      Computer Science # 01: Assignment
      Anas
      Оценок пока нет
    • Sunit Explained: Stéphane Ducasse
      Документ8 страниц
      Sunit Explained: Stéphane Ducasse
      Gratian Stevie
      Оценок пока нет
    • Application Development Using Flutter
      Документ5 страниц
      Application Development Using Flutter
      Dee Pan Kar
      Оценок пока нет