javascript白色简洁计算器


Posted in Javascript onMay 04, 2015

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

javascript白色简洁计算器

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; 
    } 
 
  } 
}

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

Javascript 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
jQuery简单实现日历的方法
May 04 #Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
js简单实现竖向tab选项卡的方法
May 04 #Javascript
PHP+mysql+Highcharts生成饼状图
May 04 #Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 #Javascript
js检测判断日期大于多少天的方法
May 04 #Javascript
jQuery实现表格展开与折叠的方法
May 04 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
几个判断型的面试题
2012/07/03 面试题
教育专业个人求职信
2013/12/02 职场文书
国庆宣传标语
2014/06/30 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Oracle 区块链表创建过程详解
2021/05/15 Oracle
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
HTML基础详解(下)
2021/10/16 HTML / CSS
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL