基于js白色简洁样式计算器

今天给大家分享一款白色简洁样式计算器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

时间: 2024-08-06 07:34:24

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

一个简洁的计算器

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/css"> .box{ width: 500px; height: 750px; background: #ff7623; border-radius: 10px; m

“高三”笔记之动态JS、动态样式

拜读<JavaScript高级程序设计> --- 站在巨人的肩上 动态JS.动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本:包括加载外部文件和添加内部代码块两种:动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行:下面将主要以JS为例,小小的探索下动态脚本的加载.执行以及jQuery的做法.Angularjs的相关做法: 1.动态加载外部文件 因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理:这里的重点是怎么知道脚本已加载完成呢?呵呵

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

js操作元素样式

样式表有外部样式表.内部样式表.行内样式. js改变css样式也是有三种.针对于外部样式表如果不采用后台技术,只是单纯的用js是不能实现的.所以下面只讨论两个方法. 一.js改变内部样式 其操作方法和一般标签一样,给style标签加一个类名或id,然后js中获取该元素,向里面添加内容即可改变样式. 示例: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

jquery:基于js的框架

jquery:基于js的框架 框架: 1.方便使用 2.解决了兼容性的问题 官方网站jQuery.com(2点几版本的不支持IE6.7.8) this 当前环境下指代的对象 闭包(closer) 1.可以让局部变量持续的保存下来 在一个函数(对象)里面定义一个函数,这个内部函数可以访问外面函数的局部变量,而且可以让外面的变量引用,可以持续保存局部变量 一个函数里面必须包含一个函数,而且要引用外面函数的变量,里面的函数必须要返回出去,可以使用相同名称的变量 缺点:对内存耗需比较大,可能会导致内存泄

js css 实现简易计算器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js获取元素样式方法

? 1 2 3 4 5 6 7 8 function getStyle(ojb,attr){       if(obj.currentStyle){             return obj.currentStyle[attr];       }         else{            return getComputedStyle(obj,false)[attr];        } } js获取元素样式方法,布布扣,bubuko.com

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

一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列的最后位置(第n-1个位置,n为待排序元素个数) c.排除此次排序最后面的那个元素(n=n-1),继续对剩余序列重复前面两步 d. 当(n= n-1)=0时,排序完成 2. 具体实现 以如下待排序序列为例: 到此,第一次冒泡完成,最大值7冒泡到最后面. 然后继续对除最后元素(7)外的序列进行冒泡排序

基于js全屏动画焦点图幻灯片

今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slideshow" id="slideshow"> <ol class="slides"> <li class="current"> <div class="description"&g