今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载。适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

在线预览   源码下载

实现的代码。

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>

via:http://www.w2bc.com/Article/25923

基于js白色简洁样式计算器的更多相关文章

  1. 基于js alert confirm样式弹出框

    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. 文献综述六:基于JS 技术的电子商品管理系统设计及实现

    一.基本信息 标题:基于JS 技术的电子商品管理系统设计及实现 时间:2017 出版源:无线互联科技 文件分类:js技术的研究 二.研究背景 主要对Js下电商管理系统的设计及实现进行了探讨,利用软件工 ...

  3. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  4. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  5. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  6. 基于JS功能强大的日期插件Kalendae

    开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...

  7. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  8. Breach - HTML5 时代,基于 JS 编写的浏览器

    Breach 是一款属于 HTML5 时代的开源浏览器项目,,完全用 Javascript 编写的.免费.模块化.易于扩展.这个浏览器中的一切都是模块,Web 应用程序在其自己的进程运行.通过选择合适 ...

  9. 常见排序算法基于JS的实现

    一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列 ...

随机推荐

  1. 【补间动画示例】Tweened Animation

    代码中定义动画示例 public class MainActivity extends ListActivity </integer> 常用的Activity转场动画中的补间动画 publ ...

  2. 小课堂week18 编程范式巡礼第三季 谈谈依赖反转

    编程范式巡礼第三季--谈谈依赖反转 今天会进入深一点的主题,谈一个软件开发的"道":依赖反转.根据我的观察,这也是架构师与程序员的分水岭之一. 什么是依赖反转 引出问题 让我们从U ...

  3. 检测任意日期字符串是否属于当天的java实现方案

    有时候我们会遇到很多形式的日期判断,甚至是并不常见的日期形式,比如20161212之类的日期,下面就此来进行代码是否处于当天的日期校验的代码实现来做一个整理. public static boolea ...

  4. 轻量级UIImageView分类缓存 库 AsyncImageView 使用

    轻量级UIImageView分类缓存 库 AsyncImageView 使用 一: AsyncImageView 主页:https://github.com/nicklockwood/AsyncIma ...

  5. 河流Shader

    原地址:http://www.unity蛮牛.com/blog-2321-336.html Shader "Custom/TextureEffect" { Properties { ...

  6. 便捷的 chrome/Firefox扩展

    chrome: 1.Postman-REST Client  模拟发送post/get请求测试接口很好用 2.Edit This Cookie 管理cookie 3.json-handle / jso ...

  7. nginx配置静态文件过期时间

    1. 编辑虚拟主机配置文件/usr/local/nginx/conf/vhosts/huangzhenping.conf 说明:采用location方式 1 2 3 4 5 6 7 8 9 10  l ...

  8. CI:模拟进化与遗传算法

     模拟进化计算 (Simulated  Evolutionary Computation)  是近二十年来信息科学.人工智能与计算机科学的一大研究领域,由此所派生的求解优化问题的仿生类算法(遗传算法. ...

  9. ibatis/mybatis显示sql语句 log4j.properties配置文件

    将ibatis/mybatis log4j运行级别调到DEBUG可以在控制台打印出ibatis运行的sql语句,方便调试: ### 设置Logger输出级别和输出目的地 ### log4j.rootL ...

  10. 使用TestFlight邀请外部人员測试APP

    怎样使用TestFlight邀请外部人员測试APP 详细过程例如以下: 1.在邀请測试人员的时候.按上线流程打包APP,提交. 2.提交审核,在邀请測试员的时候,你必须先提交审核,苹果会在大约2个工作 ...