您的位置：首页 > Web前端 > JavaScript

js实现简单的计算器

2017-07-19 21:13 351 查看 
 js实现一个简单的计算器，有加减乘除的基本功能。
首先使用HTML写一个界面，需要三个文本框，包括两个输入框，一个输出框，输出框不能被操作，还需要一个选择框，用来选择运算符，最后还需要两个按钮，等于按钮以及清零按钮。
选择框使用标签select
输出按钮不能被操作则应使用属性disabled="true"
清零功能则使用reset,可以清零整个表单，不过对其他表单的内容没有影响
接着需要使用CSS调整样式，对整体进行美化，添加背景颜色，设置其长度和宽度
然后使用js实现其功能：先获得两个输入框的值以及选择框的运算符，将得到的输入框的值转为Number型，然后对其进行操作运算。
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/com.css" /></head><body><div id="computer"><form><input id="text1" type="text" /><select id="select"><option>+</option><option>-</option><option>*</option><option>/</option></select><input id="text2" type="text" /><script type="text/javascript" src="js/com.js"></script><input id="button" type="button" value="=" onclick="computer();"/><input id="text3" disabled="true" type="text" /><input id="button1" type="reset" value="清零" /></form></div></body></html>
*{margin: 0;padding: 0;}#computer{width: 700px;height: 40px;padding-top: 25px;padding-left: 15px;}#computer input{height: 30px;width: 100px;}#button{background-color:burlywood;}#button1{background-color:burlywood;margin-left: 50px;}#text1,#text2{text-align: center;background-color: beige;}#text3{text-align: center;background-color: aliceblue;}
function computer(){var text1 = document.getElementById("text1").value;var text2 = document.getElementById("text2").value;var select = document.getElementById("select").value;//将value转为数字Number()或parseInt()var resu;if(select=="+"){resu = Number(text1) + Number(text2);}else if(select=="-"){resu = Number(text1) - Number(text2);}else if(select=="*"){resu = Number(text1) * Number(text2);}else if(select=="/"){resu = Number(text1) / Number(text2);}document.getElementById("text3").value=resu;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航