#js#简单的在线计算器
啊因为懒得去找素材了,所以做了一个仿win10计算器的灰白色计算器。
参考:http://www.html5tricks.com/jquery-calculator.html
HTML源码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Caluculator</title>
- <link type="text/css" rel="stylesheet" href="css/reset.css">
- <link type="text/css" rel="stylesheet" href="css/main.css">
- <script type="text/javascript" src="js/script.js"></script>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <link href="" rel="stylesheet">
- </head>
- <body>
- <div id="counter">
- <h3>在线计算器</h3>
- <input type="text" value="0" id="inputFrame"/>
- <ul>
- <li>7</li><li>8</li><li>9</li><li class="order">+</li>
- <li>4</li><li>5</li><li>6</li><li class="order">-</li>
- <li>1</li><li>2</li><li>3</li><li class="order">×</li>
- <li>0</li><li>C</li><li>=</li><li class="order">÷</li>
- </ul>
- </div>
- </body>
- </html>
JS源码:
- window.onload=function(){
- var lis=document.getElementsByTagName("li");
- for(var i=0;i<lis.length;i++){
- lis[i].onmousedown=doInput;
- lis[i].onmouseover=function(){
- this.className="active";
- }
- lis[i].onmouseout=function(){
- this.className="";
- }
- }
- }
- var refresh=false;
- var sum='0';
- var preOrder='';
- function cal(a,b,order){
- var res=0;
- if(order=='+'){
- res=a+b;
- }
- else if(order=='-'){
- res=a-b;
- }
- else if(order=='×'){
- res=a*b;
- }
- else if(order=='÷'){
- res=a/b;
- }
- else{
- res=b;
- }
- return res;
- }
- function doInput(){
- var oInput=document.getElementById("inputFrame");
- var iHTML=this.innerHTML;
- if(iHTML=='='){
- oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
- refresh=true;
- sum='0';
- preOrder='';
- }
- else if(iHTML=='+'||iHTML=='-'||iHTML=='×'||iHTML=='÷'){
- oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
- refresh=true;
- sum=oInput.value;
- preOrder=iHTML;
- }
- else if(iHTML=='C'){
- oInput.value='0';
- sum='0';
- preOrder='';
- }
- else{
- if(refresh){
- oInput.value=parseInt(iHTML);
- refresh=false;
- }
- else{
- oInput.value=parseInt(oInput.value+iHTML);
- }
- }
- }
CSS源码:
- @charset "UTF-8";
- /* reset.css */
- body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
- margin: 0;
- padding: 0;
- }
- body{
- font-size: 12px;
- }
- img{
- border: none;
- }
- li{
- list-style: none;
- }
- input,select,textarea{
- outline: none;
- border: none;
- }
- textarea{
- resize: none;
- }
- a{
- text-decoration: none;
- color: #656565;
- }
- /* 清除浮动 */
- .clearfix:after{
- content: "";
- display: block;
- clear: both;
- }
- .clearfix{
- zoom: 1;
- }
- /* 设置浮动 */
- .fl{
- float: left;
- }
- .fr{
- float: right;
- }
- /*************************************************************/
- /* main.css */
- #counter{
- width: 500px;
- height: 420px;
- margin: 50px auto;
- position: relative;
- border: #cfcfcf solid 1px;
- }
- #counter h3{
- margin:10px 0 0 10px;
- width: 490px;
- height: 30px;
- font-size: 23px;
- /* font-weight: bold; */
- }
- #counter input{
- width: 490px;
- height: 99px;
- line-height: 99px;
- padding-right: 10px;
- font-size: 40px;
- font-weight: bold;
- text-align: right;
- border-bottom: #cfcfcf solid 1px;
- }
- #counter ul{
- width: 500px;
- height: 280px;
- }
- #counter li{
- float: left;
- width: 125px;
- height: 70px;
- line-height: 70px;
- background-color: #e6e6e6;
- /* font-weight: bold; */
- font-size: 30px;
- text-align: center;
- }
- #counter .active{
- background-color: #cfcfcf;
- }
PS:以后这个博客应该不会写ACM的东西了,今年寒假和暑假撸了一下前端,算是入了门吧。也想告别过去一年的ACM生涯了,感觉自己的天赋真的不够,甚至努力程度也不够,兴趣过了之后只觉烦躁,而且不想以后的假期都耗在环境恶劣的学校宿舍,所以打算放弃了。打算开始体验一下后端开发!Kadima!
#js#简单的在线计算器的更多相关文章
- js加减乘除在线计算器代码
js加减乘除在线计算器代码 在线演示本地下载
- Tourist.js – 简单灵活的操作指南和导航插件
Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...
- 原生js简单调用百度翻译API实现的翻译工具
先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...
- baguetteBox.js - 简单易用的 lightbox 插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示 ...
- 基于PHP实现一个简单的在线聊天功能(轮询ajax )
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js简单操作Cookie
贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
随机推荐
- 迟到的 WPF 学习 —— 控件
这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...
- HDU 4618 - Palindrome Sub-Array(2013MUTC2-1008)(DP)
d(i,j,k)表示左上角坐标为(i,j),k为正方形边长 d(i,j,k)=1,如果d(i+1,j+1,k-2)=0,且上下两个外围的相等且回文,左右两个外围的相等且回文:否则d(i,j,k)=0 ...
- Bundles
Bundles 接着在Global.asax文件的Application_Start方法中调用BundleConfig.RegisterBundles方法: protected void Applic ...
- Atomic变量和Thread局部变量
Atomic变量和Thread局部变量 前面我们已经讲过如何让对象具有Thread安全性,让它们能够在同一时间在两个或以上的Thread中使用.Thread的安全性在多线程设计中非常重要,因为race ...
- Jquery EasyUI tabs处理
一 获取选中的 Tab 1. // 获取选中的 tab panel 和它的 tab 对象 2. var pp = $('#tt').tabs('getSelected'); 3. var ta ...
- 关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- Javascript内存泄漏
Javascript内存泄漏 原文:http://point.davidglasser.net/2013/06/27/surprising-javascript-memory-leak.html 本周 ...
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- 设计模式之 - 外观模式 (Facade design pattern)
1. 模式意图: 为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更容易使用. 2. 结构 3. 工厂方法模式C#实现 using System; ...