投稿
  1. 首页
  2. 随笔

简单的计算器代码

角速度线速度 • 2023-3-20 • 随笔 • 阅读 10

简单的计算器代码,第1张

<meta content="text/htmlcharset=utf-8" http-equiv="Content-Type" />

<title></title>

<style type="text/css">

#box{width: 295pxmargin: 0 autotext-align: justifyborder: 1px solid #dddpadding: 15px}

.d_num{display: inline-blockmargin:  10pxwidth: 33pxheight: 30pxborder: 1px solid #dddtext-align: centerline-height: 30pxcursor: pointer}

.sum{margin: 0 10px 10pxline-height: 30pxfont-size: 20px}

#sum{width: 205pxheight: 30pxpadding: 0 5pxmargin-left: 5pxfont-size: 20px}

#process{width: 255pxheight: 30pxpadding: 0 5pxmargin-left: 5pxfont-size: 20px}</style>

<p id="box">

<p class="sum">

<input id="process" name="process" type="text" value="0" /></p>

<p class="sum">

SUM:<input id="sum" name="sum" type="text" value="0" /></p>

<p>

<span class="d_num" data-num="1">1</span><span class="d_num" data-num="2">2</span><span class="d_num" data-num="3">3</span><span class="d_num" data-num="&lt-">&lt-</span><span class="d_num" data-num="C">C</span></p>

<p>

<span class="d_num" data-num="4">4</span><span class="d_num" data-num="5">5</span><span class="d_num" data-num="6">6</span><span class="d_num" data-num="*">*</span><span class="d_num" data-num="/">/</span></p>

<p>

<span class="d_num" data-num="7">7</span><span class="d_num" data-num="8">8</span><span class="d_num" data-num="9">9</span><span class="d_num" data-num="+">+</span><span class="d_num" data-num="-">-</span></p>

<p>

<span class="d_num" data-num="0">0</span><span class="d_num" data-num="00">00</span><span class="d_num" data-num=".">.</span><span class="d_num" data-num="%">%</span><span class="d_num" data-num="=">=</span></p>

</p>

<script type="text/javascript">

var $box = document.getElementById('box')

var $sum = document.getElementById('sum')

var $process = document.getElementById('process')

var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false

$box.onclick = function(e){

var event = window.event || e

var ele = event.srcElement || event.target

var _className = ele.className

if(_className == 'd_num'){

var num = ele.getAttribute('data-num')//点击的.按钮对应的值

var NotNum = isNaN(num)

if(!NotNum || num == '.'){ //点击了数字

if(!statu){ //还没点击过符号

if(num1 == '0'){

num1 = ''

}

num1 += num

process = num1

}else{ //已经点击过符号

if(num2 == '0'){

num2 = ''

}

num2 += num

process = num1 + temp + num2

}

$process.value = process

}

else{ //点击了符号

if(num1 == ''){//非法 *** 作

return false

}

if(num == 'C'){//归零

num1 = ''

num2 = ''

process = ''

temp = ''

sum = ''

$process.value = '0'

$sum.value = '0'

更多相关文章推荐：

<!DOCTYPE html>

<html>

    <meta name="content-type" content="text/html charset=UTF-8">

    <head>

        <title>Calculator</title>

        

        <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中-->

<script type="text/javascript">

    var numresult

    var str

    

    function onclicknum(nums) {

        str = document.getElementById("nummessege")

        str.value = str.value + nums

    }

    function onclickclear() {

        str = document.getElementById("nummessege")

        str.value = ""

    }

    function onclickresult() {

        str = document.getElementById("nummessege")

        numresult = eval(str.value)

        str.value = numresult

        

    }

</script>

    </head>

    <body bgcolor="skyblue" >

    

    <!--定义按键表格,每个按键对应一个事件触发-->

    

        <table border="1" align="center" bgColor="skyblue"

            style="height: 350px width: 270px">

            <tr>

                <td colspan="4">

                    <input type="text" id="nummessege"

                        style="height: 90px width: 350px font-size: 50px" />

                </td>

            </tr>

            <tr>

                <td>

                    <input type="button" value="1" id="1" onclick="onclicknum(1)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="2" id="2" onclick="onclicknum(2)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="3" id="3" onclick="onclicknum(3)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="+" id="add" onclick="onclicknum('+')"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

            </tr>

            <tr>

                <td>

                    <input type="button" value="4" id="4" onclick="onclicknum(4)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="5" id="5" onclick="onclicknum(5)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="6" id="6" onclick="onclicknum(6)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="-" id="sub" onclick="onclicknum('-')"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

            </tr>

            <tr>

                <td>

                    <input type="button" value="7" id="7" onclick="onclicknum(7)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="8" id="8" onclick="onclicknum(8)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="9" id="9" onclick="onclicknum(9)"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="*" id="mul" onclick="onclicknum('*')"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type="button" value="0" id="0" onclick="onclicknum(0)"

                        style="height: 70px width: 190px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="." id="point" onclick="onclicknum('.')"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

                <td>

                    <input type="button" value="/" id="division"

                        onclick="onclicknum('/')"

                        style="height: 70px width: 90px font-size: 35px">

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type="button" value="Del" id="clear"

                        onclick="onclickclear()"

                        style="height: 70px width: 190px font-size: 35px" />

                </td>

                <td colspan="2">

                    <input type="button" value="=" id="result"

                        onclick="onclickresult()"

                        style="height: 70px width: 190px font-size: 35px" />

                </td>

            </tr>

        </table>

    </body>

</html>

首先要说明一点，纯html是不能编辑计算器的，因为html是标记语言，不是编程语言，不能编辑程序，要写计算器，还需要js代码，下面为全部代码：

<html>

<head>

<title>计算器</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"/>

</head>

<body>

<script language="JavaScript">

<!-- Hide the script from old browsers --

function compute(obj)

{obj.expr.value = eval(obj.expr.value)}

var one = '1'

var two = '2'

var three = '3'

var four = '4'

var five = '5'

var six = '6'

var seven = '7'

var eight = '8'

var nine = '9'

var zero = '0'

var plus = '+'

var minus = '-'

var multiply = '*'

var divide = '/'

var decimal = '.'

function enter(obj, string)

{obj.expr.value += string}

function clear(obj)

{obj.expr.value = ''}

// --End Hiding Here -->

</script>

<form name="calc">

<table border=1>

<td colspan=4><input type="text" name="expr" size=30 action="compute(this.form)"><tr>

<td><input type="button" value=" 7 " onClick="enter(this.form, seven)">

<td><input type="button" value=" 8 " onClick="enter(this.form, eight)">

<td><input type="button" value=" 9 " onClick="enter(this.form, nine)">

<td><input type="button" value=" / " onClick="enter(this.form, divide)">

<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)">

<td><input type="button" value=" 5 " onClick="enter(this.form, five)">

<td><input type="button" value=" 6 " onClick="enter(this.form, six)">

<td><input type="button" value=" * " onClick="enter(this.form, multiply)">

<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)">

<td><input type="button" value=" 2 " onClick="enter(this.form, two)">

<td><input type="button" value=" 3 " onClick="enter(this.form, three)">

<td><input type="button" value=" - " onClick="enter(this.form, minus)">

<tr><td colspan=2><input type="button" value=" 0 " onClick="enter(this.form, zero)">

<td><input type="button" value=" . " onClick="enter(this.form, decimal)">

<td><input type="button" value=" + " onClick="enter(this.form, plus)">

<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)">

<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"></table>

</form>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6301692.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
角速度线速度 角速度线速度 一级用户组
0 0
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表（0条）

保存