html-css-JavaScript简易计算器

最新推荐文章于 2022-01-25 13:50:36 发布

L-s

最新推荐文章于 2022-01-25 13:50:36 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43338256/article/details/84072963

简介

结合html和css学习并运用JavaScript做一个网页上功能较为齐全的简易计算器。

计算器的排版

排版的方式有很多种，就简略地记录一下四种方法吧。

规定div长度自动换行

可以通过css规定div的长度，然后元素达到自动换行的效果。因为较为基础，就不演示代码。

通过br实现简单换行

<p>哈哈哈哈或或或</p><br><p>啦啦啦啦啦</p>

通过br就能实现简易换行，也是比较常见的方法。

通过gird网络布局

主要参考网站：https://blog.youkuaiyun.com/zwjweb/article/details/78760130

grid主要写在css文件再搭配类选择器配合使用。首先要将其display:grid;

通过grid-template-columns和grid-template-row分别规定有几行几列，且每行每列的长度有两种方法设置。一种是设置其百分比，另一种则直接规定像素长度。

.normal{
	display:grid；
	grid-template-columns： 40% 40% 40%;
	grid-template-row: 50px 50px;
}

还可以实现跨行跨列使其更加灵活，代码如下:

.normal_1{
		display: grid;
	 	grid-column-start: 1;
	 	grid-column-end: 3;
	 	grid-row-start: 2;
	 	grid-row-end:4;
}

通过Flex布局

使用前也需要将display:flex;
参考网站:http://www.cnblogs.com/sqyambition/p/9254648.html
因为该网站描述十分齐全，因此笔者就不在此重复。

计算器的按键响应

这一部分主要写在JavaScript里，通过按钮onclick的方法使其调用里面的函数从而实现所需要的功能。初学的难点在于如何定义变量和如何修改内容，可以结合菜鸟教程里的一些基础进行掌握。
就简单的展示最基础的输入效果。

var show = document.getElementById("input-text");
function input_element(num){
        if(show.value == "0")
            show.value = num;
        else
            show.value += num;
    }

注意，如果变量的生存周期只在函数里可以通过let定义变量（因为时间有点久，所以笔者的代码处就不做更改了）。let和var的差别参考：
https://www.cnblogs.com/fly_dragon/p/8669057.html

效果如下

在这里插入图片描述

整个计算器的代码

<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
	</head>

	<body>
    <input type="text" name="input-text" id="input-text" value="0">
        <div class="switch_circle">
        <input type="button" value="Rad" class="not-number"  id=rad onclick="turn_rad()">
        <input type="button" value="°" class="not-number"  id=degreed onclick="turn_degreed()">
        </div>
        <input type="button" value="x!" class="not-number" onclick="factorial()">
        <input type="button" value="(" class="not-number" onclick="input_element('(')">
        <input type="button" value=")" class="not-number" onclick="input_element(')')">
        <input type="button" value="%" class="not-number" onclick="per_cent()">
        <input type="button" value="AC" class="not-number" onclick="return0()"><br>
        <input type="button" value="lnv" class="not-number">
        <input type="button" value="sin" class="not-number" onclick="return_sin()">
        <input type="button" value="ln" class="not-number" onclick="return_ln()">
        <input type="button" value="7" class="number" onclick="input_element(7)">
        <input type="button" value="8" class="number" onclick="input_element(8)">
        <input type="button" value="9" class="number" onclick="input_element(9)">
        <input type="button" value="÷" class="not-number" onclick="input_element('/')"><br>
        <input type="button" value="π" class="not-number" onclick="input_element(Math.PI)">
        <input type="button" value="cos" class="not-number" onclick="return_cos()">
        <input type="button" value="log" class="not-number" onclick="return_log()">
        <input type="button" value="4" class="number" onclick="input_element(4)">
        <input type="button" value="5" class="number" onclick="input_element(5)">
        <input type="button" value="6" class="number" onclick="input_element(6)">
        <input type="button" value="×" class="not-number" onclick="input_element('*')"><br>
        <input type="button" value="e" class="not-number" onclick="input_element(Math.E)">
        <input type="button" value="tan" class="not-number" onclick="return_tan()">
        <input type="button" value="√" class="not-number" onclick="return_sqrt()">
        <input type="button" value="1" class="number" onclick="input_element(1)">
        <input type="button" value="2" class="number" onclick="input_element(2)">
        <input type="button" value="3" class="number" onclick="input_element(3)">
        <input type="button" value="-" class="not-number" onclick="input_element('-')"><br>
        <input type="button" value="Ans" class="not-number" onclick="input_element(ans)">
        <input type="button" value="EXP" class="not-number" onclick="return_EXP()">
        <input type="button" value="x^y" class="not-number" onclick="x_y()">
        <input type="button" value="0" class="number" onclick="input_element(0)">
        <input type="button" value="." class="number" onclick="input_point()">
        <input type="button" value="=" class="equal" onclick="caculate()">
        <input type="button" value="+" class="not-number" onclick="input_element('+')"><br>


    <style type="text/css">
    #input-text{
    width: 577px;
    height: 40px;
    text-align: right;
    padding: 10px 10px 10px 10px;
    font-size: 25px;
    display: block;
    }

    .not-number{
    font-size: 18px;
    width: 70px;
    height: 40px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 0;
    background: #e4e2e2;
    border: 0;
    }

    .not-number:active{
    background: #dcdada;
    }

    .number{
    font-size: 18px;
    width: 70px;
    height: 40px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: #f3f3f3;
    }

    .number:active{
    background: #e9e8e8;
    }

    .equal{
    color: #fff;
    font-size: 22px;
    width: 70px;
    height: 40px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: #74aeff;
    }

    .equal:active{
    background: #7488ff;
    }

    .switch_circle{
    display: inline;
    clear:left;
    }

    #rad{
    background:#74aeff;
    }
	</style>




    <script type="text/javascript">

    var show = document.getElementById("input-text");
    var point_number = 0;
    var text_1 = "";
    var style = "rad";
    var ans;


    function input_element(num){
        if(show.value == "0")
            show.value = num;
        else
            show.value += num;
    }

    function input_point(){
        if(point_number == 0)
            show.value += '.';
        else
            show.value = show.value;
        point_number = 1;
    }

    function return0()
    {
        text_1 = "";
        show.value = "0";
        point_number = 0;
    }

    function caculate()
    {
        if(text_1 == "")
            show.value = eval(show.value);
        else
            show.value = Math.pow(text_1,show.value);
        ans = show.value;
    }

    function per_cent()
    {
        show.value = eval(show.value * 100) + '%';
    }

    function factorial()
    {
        var i;
		var result = 1;
		for(i=1;i<=show.value;i++)
			result *= i;
		show.value = result;
    }

    function return_EXP()
    {
        show.value = Math.exp(show.value);
    }

    function return_sin()
    {
        if(style == "rad")
            show.value = Math.sin(show.value);
        else
            show.value = Math.sin(eval(show.value*Math.PI/180));
    }

    function return_cos()
    {
        if(style == "rad")
            show.value = Math.cos(show.value);
        else
            show.value = Math.cos(eval(show.value*Math.PI/180));
    }

    function return_tan()
    {
        if(style == "rad")
            show.value = Math.tan(show.value);
        else
            show.value = Math.tan(eval(show.value*Math.PI/180));
    }

    function return_sqrt()
    {
        show.value = Math.sqrt(show.value);
    }

    function return_ln()
    {
        show.value = Math.log(show.value);
    }

    function return_log()
    {
        show.value = Math.log10(show.value);
    }

    function x_y()
    {
        text_1 = show.value;
        show.value = 0;
    }

    function turn_rad()
    {
        style = "rad";
        document.getElementById("rad").style.background='#74aeff';
        document.getElementById("degreed").style.background='#e4e2e2';
    }

    function turn_degreed()
    {
        style = "degreed";
        document.getElementById("rad").style.background='#e4e2e2';
        document.getElementById("degreed").style.background='#74aeff';
    }
	</script>



	</body>
</html>