这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家汇总了 2 个原生 JavaScript 实现的计算器功能的代码,一个简单一个稍微复杂些,小伙伴们根据自己的需要来选择吧
原生 JavaScript 制作计算器
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <!--第一个数X-->
- X:
- <input type="text" id="inp1" value="" />
- <br />
- <!--符号-->
- F:
- <input type="text" id="inp2" value="" />
- <br />
- <!--第二个数Y-->
- Y:
- <input type="text" id="inp3" value="" />
- <br />
- <!--结果R-->
- R:
- <input type="text" id="inp4" value="" />
- <br />
- <!--点击按钮-->
- <input type="submit" name="btn" id="btn" value="请计算" />
- </body>
- <script type="text/javascript">
- var inpX1 = document.getElementById("inp1");
- var inpF1 = document.getElementById("inp2");
- var inpY1 = document.getElementById("inp3");
- var inpR = document.getElementById("inp4");
- var result = document.getElementById("btn");
- var inpX;
- var inpY;
- var inpF;
- var sum;
- // 点击事件
- result.onclick = function() {
- inpX = Number(inpX1.value);
- inpF = inpF1.value;
- inpY = Number(inpY1.value);
- switch (inpF) {
- case "+":
- {
- sum = inpX + inpY;
- break;
- }
- case "-":
- {
- sum = inpX - inpY;
- break;
- }
- case "*":
- {
- sum = inpX * inpY;
- break;
- }
- case "/":
- {
- sum = inpX / inpY;
- break;
- }
- default:
- {
- alert("请输入加减乘除中的任意一个");
- break;
- }
- }
- inpR.value = sum.toFixed(2);
- }
- </script>
- </html>
再给大家分享一个稍微复杂些的计算器
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <style>
- body,ul{ margin:0px; padding:0px;} body{ background:#AF6332} li{ list-style:none;}
- .fl{ float:left;} .fr{ float:right;} .clearfix:after{ content:""; display:block;clear:both}
- .clearfix{zoom:1;} /*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在,将其并在一行用逗号隔开*/ .calBox{
- width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px;
- position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px;
- box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset;
- -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5)
- inset; background:#F9F9F9; overflow:hidden} input{ width:406px; height:82px;
- margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px
- 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8)
- inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑";
- font-size:40px; padding:0px 10px;} ul{} li{ list-style:none; width:74px;
- height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px
- solid #8B8B8B; border-radius:5px; background:url(img/calBg) repeat-x; float:left;
- margin:12px 6px 0px;} .one li{ height:44px; background:url(calBg1.jpg)
- repeat-x; line-height:44px;cursor:pointer;} .one .orange{ background:url(calBg2.jpg)
- repeat-x; border:1px solid #875733;} .one .black{ background:url(calBg3.jpg)
- repeat-x; border:1px solid #363636; color:#fff;} .one .gray{ background:url(calBg4.jpg)
- repeat-x; border:1px solid #5F6366;} .zero{ width:160px;} .one .deng{ background:url(calBg5.jpg);
- height:100px;} .twoBox{ width:353px; overflow:hidden; } .two{ width:358px;}
- .calBox .three { margin:0px} .calu{ padding:0px 10px; width:470px;}
- </style>
- <script>
- function findArr(a, c) {
- for (var b = 0; b < a.length; b++) {
- if (a[b] == c) {
- return true
- }
- }
- return false
- }
- function getClass(d, f) {
- if (document.getElementsByClassName) {
- return d.getElementsByClassName(f)
- } else {
- var a = [];
- var e = document.getElementsByTagName("*");
- for (var c = 0; c < e.length; c++) {
- var b = e[c].className.split(" ");
- if (findArr(b, f)) {
- a.push(e[c])
- }
- }
- return a
- }
- };
- window.onload = function() {
- var aNum = getClass(document, 'num');
- var oText = document.getElementById('text');
- var aPer = getClass(document, 'oper');
- var oPer = document.getElementById('per');
- var oText1 = document.getElementById('text1');
- var oDeng = getClass(document, 'deng')[0];
- var oSq = getClass(document, 'sq')[0];
- var oRec = getClass(document, 'rec')[0];
- var oZheng = getClass(document, 'zheng')[0];
- var oOn = getClass(document, 'on')[0];
- var oOff = getClass(document, 'off')[0];
- var oClea = getClass(document, 'clea')[0];
- var bOnOrOffClick = false;
- function fnNum(a) {
- var bClear = false;
- oText.value = '0'
- for (var i = 0; i < aNum.length; i++) {
- aNum[i].onclick = function() {
- if (!bOnOrOffClick) return;
- if (bClear) {
- bClear = false;
- }
- if (oText.value.indexOf('.') != -1) {
- if (this.innerHTML == '.') {
- return;
- }
- }
- if (oPer.value && oText.value && oText1.value == '') {
- oText1.value = oText.value;
- oText.value = '';
- }
- var re = /^0\.{1}\d+$/;
- var re1 = /^([0]\d+)$/;
- oText.value += this.innerHTML;
- if (re.test(oText.value)) {
- return;
- }
- if (re1.test(oText.value)) {
- oText.value = this.innerHTML;
- }
- }
- //符号部分的添加
- for (var j = 0; j < aPer.length; j++) {
- aPer[j].onclick = function() {
- if (oText.value && oPer.value && oText1.value) {
- var n = eval(oText1.value + oPer.value + oText.value);
- oText.value = n;
- oText1.value = '';
- }
- oPer.value = this.innerHTML;
- }
- }
- //点击等号的时候
- oDeng.onclick = function() {
- //+-*/%的情况
- if (oText1.value == '' && oPer.value == '' && oText.value == '') {
- return;
- }
- var n = eval(oText1.value + oPer.value + oText.value);
- oText.value = n;
- oText1.value = '';
- oPer.value = '';
- bClear = true;
- }
- //点击开根号的时候
- oSq.onclick = function() {
- var m = Math.sqrt(oText.value);
- oText.value = m;
- }
- //点击倒数的时候
- oRec.onclick = function() {
- var a = 1 / oText.value;
- if (oText.value == '0') {
- a = '正无穷'
- }
- oText.value = a;
- }
- //正负号的时候
- oZheng.onclick = function() {
- if (oText.value > 0) {
- oText.value = -oText.value;
- } else {
- oText.value = -oText.value;
- }
- }
- //清屏的时候
- oClea.onclick = function() {
- oText.value = '0';
- oText1.value = '';
- oPer.value = '';
- }
- }
- }
- //on时
- oOn.onclick = function() {
- bOnOrOffClick = true;
- fnNum(bOnOrOffClick);
- }
- //off时
- oOff.onclick = function() {
- bOnOrOffClick = false;
- fnNum(bOnOrOffClick);
- oText.value = '';
- }
- }
- </script>
- </head>
- <body>
- <div class="calBox">
- <div class="calu">
- <input type="text" id="text">
- <ul class="one clearfix">
- <li class="orange on">
- 开机
- </li>
- <li class="orange off">
- 关机
- </li>
- <li class="orange clea">
- 清屏
- </li>
- <li class="black zheng">
- +/-
- </li>
- <li class="black rec">
- 1/x
- </li>
- <li class="num">
- 7
- </li>
- <li class="num">
- 8
- </li>
- <li class="num">
- 9
- </li>
- <li class="gray oper">
- /
- </li>
- <li class="black oper">
- %
- </li>
- <li class="num">
- 4
- </li>
- <li class="num">
- 5
- </li>
- <li class="num">
- 6
- </li>
- <li class="gray oper">
- *
- </li>
- <li class="black sq">
- √
- </li>
- <!-- -->
- </ul>
- <div class="clearfix">
- <div class="twoBox fl">
- <ul class="one fl two">
- <li class="num">
- 1
- </li>
- <li class="num">
- 2
- </li>
- <li class="num">
- 3
- </li>
- <li class="gray oper">
- -
- </li>
- <li class="zero num">
- 0
- </li>
- <li class="num">
- .
- </li>
- <li class="gray oper">
- +
- </li>
- </ul>
- </div>
- <ul class="one three clearfix fl">
- <li class="black deng fl">
- =
- </li>
- </ul>
- </div>
- </div>
- </div>
- <input type="text" id="per" style="display:none">
- <input type="text" id="text1" style="display:none">
- </body>
- </html>
效果图演示
来源: http://www.phperz.com/article/17/0611/331139.html