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 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
jquery插件格式实例分析
Jun 16 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
javascript实现文字跑马灯效果
Jun 18 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
JS实现图片切换特效
2019/12/23 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
使用tensorflow实现AlexNet
2017/11/20 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现剪切功能
2019/01/23 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
办公室文秘岗位职责
2013/11/15 职场文书
银行类自荐信
2014/02/04 职场文书
《太阳》教学反思
2014/02/21 职场文书
小学假期安全广播稿
2014/09/28 职场文书
职代会闭幕词
2015/01/28 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers