javascript怎么实现编写网页版计算器
本篇内容主要讲解“javascript怎么实现编写网页版计算器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript怎么实现编写网页版计算器”吧!
本篇主要纪录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下
话不多说,代码如下:
首先是html的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用js实现网页版计算器</title> <link rel="stylesheet" href="cal.css" > </head> <body> <div id="container" class="container"> <input id="result" class="result"> <div id="cal" class="clearfix"> <div id="num" class="fl"> <div id="top" class="clearfix"> <input id="clear" type="button" value="C"> <input id="antonyms" type="button" value="+/-"> <input id="remainder" type="button" value="%"> </div> <div id="bonttom" class="clearfix"> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input class="zero" type="button" value="0"> <input type="button" value="."> </div> </div> <div id="math" class="fr math"> <input type="button" value="/" onclick="onclicknum('/')"> <input type="button" value="*" onclick="onclicknum('*')"> <input type="button" value="+" onclick="onclicknum('+')"> <input type="button" value="-" onclick="onclicknum('-')"> </div> <input id="res" type="button" value="="> </div> </div> </body> </html>
接下来是css样式代码:
* { margin: 0px; padding: 0px; } .clearfix:before, .clearfix:after { content: ''; display: block; } .clearfix:after { clear: both; } .clearfix { _zoom: 1; } input { display: block; } .container { width: 240px; height: 400px; border: 2px solid #eb4509; margin: 100px auto; } .fl { float: left; } .fr { float: right; } input { width: 60px; height: 60px; border: 1px solid #000; float: left; background: #ddd; font-size: 24px; color: #eb4509; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .math input { float: none; } input.zero { width: 120px; } #num { width: 180px; } #cal #math { width: 60px; } .result { width: 100%; height: 100px; line-height: 100px; border: none; background-color: #dfdfdf; font-size: 30px; float: none; outline: none; text-align: right; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
最后上js代码:
<script type="text/javascript"> var numresult; var str; var flag; var bot = document.getElementById("bonttom"); var botInputs = bot.getElementsByTagName("input"); var clear = document.getElementById("clear"); var res = document.getElementById("res"); var math = document.getElementById("math"); var mathInputs = math.getElementsByTagName("input"); var antonymsBtn = document.getElementById("antonyms"); var remainderBtn = document.getElementById("remainder"); //点击数字以及加减乘除 imporIn(botInputs); // imporIn(mathInputs); function imporIn(eles) { for (var i = 0; i < eles.length; i++) { eles[i].onclick = function () { onclicknum(this.value); } } } //点击清空c按钮 clear.onclick = function () { onclickclear(); } //点击=号得到结果 res.onclick = function () { onclickresult(); } //点击+/- antonymsBtn.onclick = function () { antonyms(); } //点击% remainderBtn.onclick = function () { remainder(); } function onclicknum(nums) { if (flag) { console.log("num=" + nums); if (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") { str.value = ""; console.log("aa" + nums); } } flag = false; str = document.getElementById("result"); str.value = str.value + nums; } //清空 function onclickclear() { str = document.getElementById("result"); str.value = ""; } //得到结果 function onclickresult() { str = document.getElementById("result"); numresult = eval(str.value); str.value = numresult; flag = true; } //正负数 function antonyms() { str = document.getElementById("result"); str.value = -str.value; } //% function remainder() { str = document.getElementById("result"); str.value = str.value / 100; } </script>
到此,相信大家对“javascript怎么实现编写网页版计算器”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!