今天给大家分享一款白色简洁样式计算器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. Android -- 重写BaseAdapter以及对ListView的优化

    背景 对于ListView.GridView.Gallery.Spinner等等,它是它们的适配器,直接继承自接口类Adapter的,使用BaseAdapter时需要重写很多方法,其中最重要的当属ge ...

  2. Visual Studio 2015年预览设置: 辅助安装程序说明

    本文介绍了第三方应用程序安装辅助安装的 Visual Studio 2015年预览时安装的说明.如果您安装了多设备开发功能,您需要使用其他第三方软件来处理这些项目.辅助安装程序允许您将部署到您的计算机 ...

  3. asp与aspx有什么区别

    asp与aspx哪个好? 最佳答案 你如果想知道哪个好,我想很多人第一个想法就是aspx好. 这很好理解,就像楼上的朋友说的,aspx是asp的升级版. 但是aspx相对于asp的升级可以说是从根本上 ...

  4. 利用反射实现JavaBean的自动赋值

    最近开发公司的一个项目,因项目不是很大的项目,所以仅仅采用了spring MVC框架,但是数据库很多表中的字段至少15个,这样当每次将数据库表中的数据取出来放入javabean中时,写setXXX方法 ...

  5. vue - 添加sass(less)处理

    1. 添加less.sass处理 1.1如果是sass,首先在当前目录安装处理插件(sass): npm i -D node-sass sass-loader 1.2如果是less,首先在当前目录安装 ...

  6. Unity协程(Coroutine)原理深入剖析再续

    Unity协程(Coroutine)原理深入剖析再续 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 前面已经介绍过对协程(Coroutine ...

  7. Java之逆向工程(1) - 反编译、修补和逆向工程技术 读书笔记

    透视JAVA——反编译.修补和逆向工程技术 读书笔记 1.  Java source is not compiled to binary machine code like C/C++ source ...

  8. Hibernate4.2.21.Final创建入门的HelloHibernet工程

    1.在hibernate官网下载hibernate-release-4.2.21.Final.zip并解压 2.新建一个java project工程(HelloHibernet)(myeclipes) ...

  9. 数据库选型之内存数据库eXtremeDB

    刘勇    Email:lyssym@sina.com 简介 鉴于内存数据库访问速率快的特点,本文分别从单线程.多线程(并发访问)和多线程读/写混合访问角度对eXtremeDB数据库读写速率展开测试. ...

  10. e.keycode详解

    function submitLoginForm(e) { e = window.event || e; if(e.keyCode == 13) { login(); } } keycode 8 = ...