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 二分法(数组array)
Apr 24 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
JS实现使用POST方式发送请求
Aug 30 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Python获取当前时间的方法
2014/01/14 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python数据存储之 h5py详解
2019/12/26 Python
python绘制分布折线图的示例
2020/09/24 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
学雷锋倡议书
2015/01/19 职场文书
英文商务邀请函范文
2015/01/31 职场文书
西安兵马俑导游词
2015/02/02 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android