前端页面计算器实现

最新推荐文章于 2024-05-11 11:39:26 发布

爱娶媳妇的苗同学

最新推荐文章于 2024-05-11 11:39:26 发布

阅读量3.7k

点赞数 7

分类专栏： Web前端前端web计算机文章标签：前端web计算机

本文链接：https://blog.csdn.net/weixin_44609873/article/details/101944936

版权

Web前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端web计算机

1 篇文章 0 订阅

订阅专栏

简易的前端计算器实现，献给大家！

1、html部分（js已嵌入）代码：

<!-- 
前端计算机
爱娶媳妇的苗同学
2019.12.24 22：29
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			#a1 {
			    float: left;
			    color:#000000;
				line-height: 60px;
				font-size: 20px;
				width: 60px;
				background: cadetblue;
				text-align: center;
				text-decoration: none;
			}
		</style>
	</head>
<body>
	<a id="a1" href="https://blog.csdn.net/weixin_44609873">CSDN</a>
    <div id="cac">
        <h2>计算器</h2>
        <div class="c_show">
<!-- 	onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"
		blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了 -->
            <input type="text" class="s_text" onfocus="this.blur();" value="0" id="result">
        </div>
        <div class="c_key"> 
            <ul>
                <li onclick="command(7);">7</li>
                <li onclick="command(8);">8</li>
                <li onclick="command(9);">9</li>
                <li class="c_tool" onclick="del('j')">←</li>
                <li class="c_tool" onclick="clearzero('j')">c</li>

                <li onclick="command(4);">4</li>
                <li onclick="command(5);">5</li>
                <li onclick="command(6);">6</li>
                <li class="c_tool" onclick="tools('*','g')">×</li>
                <li class="c_tool" onclick="tools('/','g')">÷</li>

                <li onclick="command(1);">1</li>
                <li onclick="command(2);">2</li>
                <li onclick="command(3);">3</li>
                <li class="c_tool" onclick="tools('+','g');">+</li>
                <li class="c_tool" onclick="tools('-','g');">-</li>
                <li onclick="command(0);">0</li>
                <li onclick="command('two 0');">00</li>
                <li onclick="dot('.')">.</li>
                <li class="c_tool" onclick="tools('%','g');">%</li>
                <li class="c_result" onclick="equal('j');">=</li>
            </ul>
        </div>
    </div>
</body>

<script type="text/javascript">
	//获取一下id 
	var resultDom = document.getElementById("result");
	var operate = true;
	var afequ = true;
	//点击计算器执行函数
	function command(num){  
	    var str = resultDom.value;
	    str = (str == "0" ? "":str);  //条件表达式，初始为0或空时，都算作0
		//用if语句把 00 按键分开来实现
		if(num == 'two 0'){
			str += 0;
			str += 0;
			resultDom.value = str;
			operate = true;	
		}
		else{
	    str += num;
	    resultDom.value = str;
		operate = true;	
		}
	}
	function tools(p,m){    
	    if(operate){    
	        var num = resultDom.value;
	        num = (num == "0" ? "":num);
	        resultDom.value = num + p;
	        operate = false; //防止同时输入两个运算符
	    }
	}
	function equal(m){  
	    var result = resultDom.value;
	    var r = eval(result);  //eval(string),要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。
	    resultDom.value =r;
	}
	function clearzero(){   
	    resultDom.value=0;
	
	}
	function del(m){
	    var str = resultDom.value;
	    str = str.substring(0,str.length - 1);  //substring() 方法用于提取字符串中介于两个指定下标之间的字符。
	    str = (str == "" ? 0 : str);
	    resultDom.value = str;
	}
	function dot(m){
		var str = resultDom.value;
		str += m;
		resultDom.value = str;
		operate = true;	
	}
</script>
</html>

2、Css代码：

style.css

body{
    font-size:12px;  
    font-family:"微软雅黑";
    color:#FFFFFF;
}
*{  
    padding:0px;
    margin:0px;   
}
#cac{   
    width:830px;
    height:500px;
    background:beige;
    margin:0 auto;
    padding:10px;
}
#cac .c_show .s_text{
    width:810px;
    height:80px;
    border:none;
    line-height:42px;
    text-align:right;
    padding-right:18px;
    font-size:40px;
    color:#000000;
}
#cac h2{    
    font-size:26px;
    color:#000;
    font-weight:500;
	text-align: center;
    padding: 0px 0px 10px 0px;
    cursor:move;
}
#cac .c_key ul{ 
    border:3px solid beige;
    overflow:auto;
    margin:10px auto;
}
#cac .c_key ul li{  
    float:left;
    width:140px;
    height:65px;
    background:#696969;
    margin:11px;
    text-align:center;
    line-height:65px;
    font-size:32px;
    cursor:pointer;
    list-style:none;
    /* border:1px solid #fff; */
}
#cac .c_key ul .c_tool{ 
    background:#FF9900;
    color:#fff;
}
#cac .c_key ul .c_result{   
    background:red;
    color:#fff;
}
#cac .c_key ul li:hover{    
    background:#FFFFFF;
    color:#000000;
}

计算器实现效果：

不知不觉夜已深，晚安！

谢谢观看！

爱娶媳妇的苗同学

关注

7
点赞
踩
43

收藏

觉得还不错? 一键收藏
5
评论
前端页面计算器实现

简易的前端计算器实现，献给大家！1、html部分（js已嵌入）代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器</title...
复制链接

扫一扫