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 相关文章推荐
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
js轮播图代码分享
Jul 14 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php intval函数用法总结
2019/04/14 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏