简易计算器


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #tb{
            border:6px solid gray;
            width: 40px;
            height: 500px;
            border-radius: 10px;
            box-shadow: 2px 3px 15px gray;
            background-color:pink;
        }
        td{
            border:1px solid black;
            background-color:black;
            border-radius: 6px;
        }
        input{
            width: 92px;height: 70px;  font-size: 35px;
            border-radius: 8px;
        }
        #in{
            box-shadow:inset 1px 1px 15px gray;
        }
    style>
    <script>
        var numresult;
        var str;
        function onclicknum(nums){
         str=document.getElementById("in");
            str.value=str.value+nums;
        }

        function  onclickclear(){
            str=document.getElementById("in");
            str.value="";
        }

        function onclickresult(){
            str=document.getElementById("in");
            numresult=eval(str.value);
            str.value=numresult;
        }
    script>
head>
<body>

<table id="tb" align="center" >
<tr>
    <td colspan="4" >
        <input id="in" type="text" style="width: 390px; height: 100px; font-size: 35px;">
    td>
tr>
    <tr>
        <td>
            <input id="1" type="button"  value="1" onclick="onclicknum(1)">
        td>
        <td>
            <input id="2"  type="button" value="2" onclick="onclicknum(2)">
        td>
        <td>
            <input id="3"  type="button"  value="3" onclick="onclicknum(3)">
        td>
        <td>
            <input id="add" type="button"  value="+" onclick="onclicknum('+')">
        td>
    tr>
    <tr>
        <td>
            <input id="4" type="button"  value="4" onclick="onclicknum(4)">
        td>
        <td>
            <input id="5" type="button"  value="5" onclick="onclicknum(5)">
        td>
        <td>
            <input id="6" type="button"  value="6" onclick="onclicknum(6)">
        td>
        <td>
            <input id="sub" type="button"  value="-" onclick="onclicknum('-')">
        td>
    tr>
    <tr>
        <td>
            <input id="7" type="button"  value="7" onclick="onclicknum(7)">
        td>
        <td>
            <input id="8" type="button"  value="8" onclick="onclicknum(8)">
        td>
        <td>
            <input id="9" type="button"   value="9" onclick="onclicknum(9)">
        td>
        <td>
            <input id="mul" type="button"  value="*" onclick="onclicknum('*')">
        td>
    tr>
    <tr>
        <td colspan="2">
            <input id="0" type="button" style="width: 195px;height: 75px;  font-size: 35px;" value="0" onclick="onclicknum(0)">
        td>
        <td>
            <input id="point" type="button" style="width: 92px;height: 75px;font-size: 35px" value="." onclick="onclicknum('.')">
        td>
        <td>
            <input id="division" type="button" style="width: 92px;height: 75px;font-size: 35px;" value="/" onclick="onclicknum('/')">
        td>
    tr>
    <tr>
        <td colspan="2">
            <input id="del" type="button" style="width: 195px;height: 75px;font-size: 35px;" value="Del" onclick="onclickclear()">
        td>
        <td colspan="2">
            <input id="equ" type="button" style="width: 195px;height: 75px;font-size: 35px;" value="=" onclick="onclickresult()">
        td>
    tr>
table>
body>
html>

你可能感兴趣的:(简易计算器)