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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
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学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
图解js图片轮播效果
2015/12/20 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
js的OOP继承实现(必看篇)
2017/02/18 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python tkinter控件布局项目实例
2019/11/04 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python使用Matlab命令过程解析
2020/06/04 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
详解Python中的文件操作
2021/01/14 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
致接力运动员加油稿
2015/07/21 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL