基于html+css+js实现简易计算器代码实例
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了基于html+css+js实现简易计算器代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用html+css+js实现简易计算器,
效果图如下
html代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>calculator</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" > <script type="text/javascript" src="contain.js"></script> <title>Document</title> </head> <body> <div class="calculator"> <form name="calculator"> <input type="text" id="display" value=""> <br> <input type="button" class="btn number txt" value="TYNAM"> <input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();"> <input type="button" class="btn number" value="<-" onclick="del();"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <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 number" value="." onclick="get(this.value);"> <input type="button" class="btn operator equal" value="=" onclick="calculates();"> </form> </div> </body> </html>
CSS代码如下
{ border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } .calculator { background-color: #fff; height: 600px; margin: 50px auto; width: 600px; } form { background-color: rgb(75, 70, 71); padding: 5px 1px auto; width: 245px; } .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; } #display { outline: none; background-color: #dededc; color: rgb(75, 70, 71); font-size: 40px; height: 47px; text-align: right; width: 224px; margin: 10px 10px auto; } .number { background-color: rgb(143, 140, 140); color: #dededc; } .operator { background-color: rgb(239, 141, 49); color: #ffffff; } .equal{ width: 105px; } .txt{ font-size:12px; background: none; }
JS代码如下
/ display clear / function cleardisplay() { document.getElementById("display").value = ""; } / del / function del() { var numb = ""; numb = document.getElementById("display").value; for(i=0;i<numb.length;i++) { document.getElementById("display").value = numb.substring(0,numb.length-1); if(numb == '') { 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); };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程