首页 > 编程 > JavaScript > 正文

javascript白色简洁计算器

2019-11-20 12:33:38
字体:
来源:转载
供稿:网友

本文中计算器代码很简单,你可以很容易把该网页特效应用到你的项目中。

HTML

首先我们在网页上放置一个输入框及多个计算器按钮。

<div id="calcuator">   <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />   <div id="btn-list">     <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">       C</div>     <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">       +/-</div>     <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">       %</div>     <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">       ←</div>     <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">       7</div>     <div onclick="typetoinput('8')" class=" btn-30 btn-radius">       8</div>     <div onclick="typetoinput('9')" class=" btn-30 btn-radius">       9</div>     <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">       +</div>     <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">       -</div>     <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">       4</div>     <div onclick="typetoinput('5')" class=" btn-30 btn-radius">       5</div>     <div onclick="typetoinput('6')" class=" btn-30 btn-radius">       6</div>     <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">       ×</div>     <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">       ÷</div>     <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">       1</div>     <div onclick="typetoinput('2')" class=" btn-30 btn-radius">       2</div>     <div onclick="typetoinput('3')" class=" btn-30 btn-radius">       3</div>     <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">       ײ</div>     <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">       √</div>     <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">       0</div>     <div onclick="typetoinput('.')" class=" btn-30 btn-radius">       .</div>     <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">       =</div>   </div> </div>

js

根据操作类型作相应操作:

function operator(type) {   switch (type) {   case "clear":     input.value = "0";     _string.length = 0;     /*document.getElementById("ccc").innerHTML="";         for(i=0;i<_string.length;i++)         {           document.getElementById("ccc").innerHTML+=_string[i]+" "             }*/     break;   case "backspace":     if (checknum(input.value) != 0) {       input.value = input.value.replace(/.$/, '');       if (input.value == "") {         input.value = "0";       }     }     break;   case "opposite":     if (checknum(input.value) != 0) {       input.value = -input.value;     }     break;   case "percent":     if (checknum(input.value) != 0) {       input.value = input.value / 100;     }     break;   case "pow":     if (checknum(input.value) != 0) {       input.value = Math.pow(input.value, 2);     }     break;   case "sqrt":     if (checknum(input.value) != 0) {       input.value = Math.sqrt(input.value);     }     break;   case "plus":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "plus"input.value = "+";       input.name = "type";     }     break;   case "minus":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "minus"input.value = "-";       input.name = "type";     }     break;   case "multiply":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "multiply"input.value = "×";       input.name = "type";     }     break;   case "divide":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "divide"input.value = "÷";       input.name = "type";     }     break;   case "result":     if (checknum(input.value) != 0) {       _string.push(input.value);       if (parseInt(_string.length) % 2 != 0) {         _string.push(_string[_string.length - 2])       }       if (_type == "plus") {         input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]);         input.name = "type"       } else if (_type == "minus") {         input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]);         input.name = "type"       } else if (_type == "multiply") {         input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]);         input.name = "type"       } else if (_type == "divide") {         input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]);         input.name = "type"       }       break;     }    } }

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表