html、css、js实现的一个简单计算器

最新推荐文章于 2023-12-05 18:30:09 发布

p0me1o

最新推荐文章于 2023-12-05 18:30:09 发布

阅读量359

点赞数 1

分类专栏： web入门文章标签： css javascript html

本文链接：https://blog.csdn.net/chenym8/article/details/131731047

版权

web入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主要代码来自runoob的计算器示例，只是精简了一下，把在js里监听完成的清除输入区也写成了一个函数，点击按钮的时候就自动调用了。这里面是有clear函数的，导致我写的clear函数和他发生了冲突，发现之后函数名改成fuck就可以正常清除了。（fuck是清除键）

<!DOCTYPE html>
<html>

<head>
	<style>
        /* Basic Reset */
        * {
        	border: none;
        	font-family: 'Open Sans', sans-serif;
        	margin: 0;
        	padding: 0;
        }
        body {
        
        }
        .center {
        	background-color: #fff;
        	border-radius: 50%;
        	height: 600px;
        	margin: auto;
        	width: 600px;
        }
        h1 {
        	color: #495678;
        	font-size: 30px;	
        	margin-top: 20px;
        	padding-top: 50px;
        	display: block;
        	text-align: center;
        	text-decoration: none;
        }
        form {
        	background-color: #495678;
        	box-shadow: 4px 4px #3d4a65;
        	margin: 40px auto;
        	padding: 40px 0 30px 40px;	
        	width: 280px;
        }
        .btn {
        	outline: none;
        	cursor: pointer;
        	font-size: 20px;
        	height: 45px;
        	margin: 5px 0 5px 10px;
        	width: 45px;
        }
        .btn:first-child {
        	margin: 5px 0 5px 10px;
        }
        .btn, #display, form {
        	border-radius: 25px;
        }
        #display {
        	outline: none;
        	background-color: #98d1dc;
        	box-shadow: inset 6px 6px 0px #3facc0;
        	color: #dededc;
        	font-size: 20px;
        	height: 47px;
        	text-align: right;
        	width: 165px;
        	padding-right: 10px;
        	margin-left: 10px;
        }
        .number {
        	background-color: #72778b;
        	box-shadow: 0 5px #5f6680;
        	color: #dededc;
        }
        .number:active {
        	box-shadow: 0 2px #5f6680;
          	-webkit-transform: translateY(2px);
          	-ms-transform: translateY(2px);
          	-moz-tranform: translateY(2px);
          	transform: translateY(2px);
        }
        .operator {
        	background-color: #dededc;
        	box-shadow: 0 5px #bebebe;
        	color: #72778b;
        }
        .operator:active {
        	box-shadow: 0 2px #bebebe;
          	-webkit-transform: translateY(2px);
          	-ms-transform: translateY(2px);
          	-moz-tranform: translateY(2px);
          	transform: translateY(2px);
        }
        .other {
        	background-color: #e3844c;
        	box-shadow: 0 5px #e76a3d;
        	color: #dededc;
        }
        .other:active {
        	box-shadow: 0 2px #e76a3d;
          	-webkit-transform: translateY(2px);
          	-ms-transform: translateY(2px);
          	-moz-tranform: translateY(2px);
          	transform: translateY(2px);
        }
    </style>
</head>

<body>
    <div class="center">
        <h1>简单计算器</h1>
        <form name="calculator">
            <input type="button" id="clear" class="btn other" value="fuck" onclick="fuck();">
            <input type="text" id="display">
            <br>
            <input type="button" class="btn number" value="7" onclick="get(this.value);">
            <input type="button" class="btn number" value="8" onclick="get(this.value);">
            <input type="button" class="btn number" value="9" onclick="get(this.value);">
            <input type="button" class="btn operator" value="+" onclick="get(this.value);">
            <br>
            <input type="button" class="btn number" value="4" onclick="get(this.value);">
            <input type="button" class="btn number" value="5" onclick="get(this.value);">
            <input type="button" class="btn number" value="6" onclick="get(this.value);">
            <input type="button" class="btn operator" value="*" onclick="get(this.value);">
            <br>
            <input type="button" class="btn number" value="1" onclick="get(this.value);">
            <input type="button" class="btn number" value="2" onclick="get(this.value);">
            <input type="button" class="btn number" value="3" onclick="get(this.value);">
            <input type="button" class="btn operator" value="-" onclick="get(this.value);">
            <br>
            <input type="button" class="btn number" value="0" onclick="get(this.value);">
            <input type="button" class="btn operator" value="." onclick="get(this.value);">
            <input type="button" class="btn operator" value="/" onclick="get(this.value);">
            <input type="button" class="btn other" value="=" onclick="calculates();">
        </form>
    </div>
    
    <script>
        /* limpa o display */ 
        function fuck(){
			document.getElementById("display").value="";
		};
        /* recebe os valores */
        function get(value) {
        	document.getElementById("display").value += value; 
        };
        
        /* calcula */
        function calculates() {
        	var result = 0;
        	result = document.getElementById("display").value;
        	document.getElementById("display").value = "";
        	document.getElementById("display").value = eval(result);
        };
    </script>
</body>

</html>

效果如图喵：

前端三剑客入门就结束啦，明天开始研究php咯。

p0me1o

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
html、css、js实现的一个简单计算器

主要代码来自runoob的计算器示例，只是精简了一下，把在js里监听完成的清除输入区也写成了一个函数，点击按钮的时候就自动调用了。这里面是有clear函数的，导致我写的clear函数和他发生了冲突，发现之后函数名改成fuck就可以正常清除了。（fuck是清除键）前端三剑客入门就结束啦，明天开始研究php咯。
复制链接

扫一扫