js 简单计算器功能

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1833082_iy2o9pbek9.css">
    <link rel="stylesheet" href="style.css">
    <title>简单计算器title>
head>
<body>
<div class="calculator">
    <form action="#" name="form">
        <div class="result">
            <input type="text" name="output" id="output">
        div>
        <div class="button">
            <div class="row">
                <input type="button" value="c" name="clear" id="clear">
                <input type="button" value="/" name="division" onclick="show(division.value)">
                <input type="button" value="*" name="mul" onclick="show(mul.value)">
                <input type="button" value="DEL" name="delete" onclick="del()">
            div>
            <div class="row">
                <input type="button" value="7" name="v7" onclick="show(v7.value)">
                <input type="button" value="8" name="v8" onclick="show(v8.value)">
                <input type="button" value="9" name="v9" onclick="show(v9.value)">
                <input type="button" value="-" name="subtract" onclick="show(subtract.value)">
            div>
            <div class="row">
                <input type="button" value="4" name="v4" onclick="show(v4.value)">
                <input type="button" value="5" name="v5" onclick="show(v5.value)">
                <input type="button" value="6" name="v6" onclick="show(v6.value)">
                <input type="button" value="+" name="add" onclick="show(add.value)">
            div>
            <div class="row row1">
                <input type="button" value="1" name="v1" onclick="show(v1.value)">
                <input type="button" value="2" name="v2" onclick="show(v2.value)">
                <input type="button" value="3" name="v3" onclick="show(v3.value)">
                <input type="button" value="=" name="equal" class="eq" onclick="claclute()">
            div>
            <div class="row row1">
                <input type="button" value="%" name="v" onclick="show(v.value)">
                <input type="button" value="0" name="v0" onclick="show(v0.value)">
                <input type="button" value="." name="drop" onclick="show(drop.value)">
                <input type="button" value="=" name="equal" class="eq1" onclick="claclute()">
            div>
        div>
    form>
div>
<script>
    document.getElementById('clear').onclick = function() {
        document.getElementById('output').value = "";
    }
    function show(result){

        form.output.value = form.output.value + result;
    }
    function del() {
        form.output.value = form.output.value.slice(0,-1);
    }
    function claclute() {
        if(form.output.value == "")
        {
            alert("please enter number");
        }else{
            form.output.value = eval(form.output.value);
        }
    }

script>
body>
html>

你可能感兴趣的:(javascript,前端,html)