> 웹 프론트엔드 > JS 튜토리얼 > html+js+css를 사용하여 계산기 기능을 구현하는 간단한 방법

html+js+css를 사용하여 계산기 기능을 구현하는 간단한 방법

一个新手
풀어 주다: 2017-09-23 11:03:52
원래의
2578명이 탐색했습니다.

html+js+css는 계산기 기능을 구현합니다

<!DOCTYPE html><html lang="en"><head>
  <meta charset="" ="utf-8">
  <link rel="stylesheet" type="text/css" href="./css/a.css">
  <script type=text/javascript src="./js/b.js"></script></head>
  <title>caculator</title></head><body onload="onload">
    <p id="main">
        <p class="jieguo">
            <input type="text" id="screenname" name="screenname" class="screen" value="" onfocus="jsp(this)">
        </p>
        <p class="keys">
            <p class="key1">
                <input type="button" id="AC" onclick="clearNum()" value="AC" class="buttons">
                <input type="button" id="&larr;" onclick="tuiGe()" value="&larr;" class="buttons">
                <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
                <input type="button" id="&pide;" onclick="jsq(this.id)" value="&pide;" class="buttons" style="background-color: #ffbb66">
             </p>
            <p class="key2">
                <input type="button" id="7" onclick="clearNum()" value="7" class="buttons">
                <input type="button" id="8" onclick="tuiGe()" value="8" class="buttons">
                <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
                <input type="button" id="&times;" onclick="jsq(this.id)" value="&times;" class="buttons" style="background-color: #ffbb66">
            </p>
            <p class="key3">
                <input type="button" id="4" onclick="clearNum()" value="4" class="buttons">
                <input type="button" id="5" onclick="tuiGe()" value="5" class="buttons">
                <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
                <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="background-color: #ffbb66">
            </p>
            <p class="key4">
                <input type="button" id="1" onclick="clearNum()" value="1" class="buttons">
                <input type="button" id="2" onclick    ="tuiGe()" value="2"class="buttons">
                <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
                <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons" style="background-color: #ffbb66">
            </p>
            <p class="key5">
                <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
                <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons" style="width: 100px;height: 50px;">
                <input type="button" id="=" onclick="eva()" value="=" class="buttons" style="width: 100px;height: 50px;background-color: #ffbb66">
            </p>
        </p>
    </p></body></html>
로그인 후 복사

a.css

body,html,.key{    
      margin: 0px;    
      padding: 0px;}
#main{    
    margin-left: 35%;
    }
.jieguo input{    
    width: 400px;    
    height: 40px;    
    top: 500px;    
    text-align: center;    
    border-radius: 8px;    
    text-align: center;}
.keys{    
    margin-left: 0;    
    width: 400px;}
    .key1 input{    
    width: 100px;    
    height: 50px;    
    float: left;    
    margin-left: 0px;    
    background-color: #AAAAAA;    
    border:1px solid black;}
.key2 input{    
    width: 100px;    
    height: 50px;    
    float: left;    
    margin-left: 0px;    
    background-color: #DDDDDD;    
    border:1px solid black;}
.key3 input{    
    width: 100px;    
    height: 50px;    
    float: left;    
    padding: 0px,auto;    
    background-color: #DDDDDD;    
    border:1px solid black;}
.key4 input{    
    width: 100px;    
    height: 50px;    
    float: left;    
    margin-left: 0px;    
    background-color: #DDDDDD;    
    border:1px solid black;}
.key5 input{    
    width: 200px;    
    height: 50px;    
    background-color: #DDDDDD;    
    float: left;    
    margin-left: 0px;    
    border:1px solid black;}
로그인 후 복사

b.js

var numresult; 
var str; 
var input ;function onclicknum(nums) {
    input = document.getElementById("screenname"); 
    input.value= input.value + nums; 
} 
function onclickclear() { 
    input = document.getElementById("screenname"); 
    input.value= ""; 
} 
function onclickresult() { 
    input = document.getElementById("screenname"); 
    numresult = eval(input.value); 
    input.value= numresult; 
} 
function onclickback() {
    input = document.getElementById("screenname"); 
    str=input.value.substring(0,input.value.length-1);
    document.getElementById("screenname").value=str;
}
로그인 후 복사

아래에는 두 개의 예시 사진이 있습니다
html+js+css를 사용하여 계산기 기능을 구현하는 간단한 방법
html+js+css를 사용하여 계산기 기능을 구현하는 간단한 방법

위 내용은 html+js+css를 사용하여 계산기 기능을 구현하는 간단한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿