啊因为懒得去找素材了,所以做了一个仿win10计算器的灰白色计算器。

参考:http://www.html5tricks.com/jquery-calculator.html

HTML源码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.  
  7. <title>Caluculator</title>
  8. <link type="text/css" rel="stylesheet" href="css/reset.css">
  9. <link type="text/css" rel="stylesheet" href="css/main.css">
  10. <script type="text/javascript" src="js/script.js"></script>
  11.  
  12. <meta name="description" content="">
  13. <meta name="keywords" content="">
  14. <link href="" rel="stylesheet">
  15. </head>
  16. <body>
  17. <div id="counter">
  18. <h3>在线计算器</h3>
  19. <input type="text" value="0" id="inputFrame"/>
  20. <ul>
  21. <li>7</li><li>8</li><li>9</li><li class="order">+</li>
  22. <li>4</li><li>5</li><li>6</li><li class="order">-</li>
  23. <li>1</li><li>2</li><li>3</li><li class="order">×</li>
  24. <li>0</li><li>C</li><li>=</li><li class="order">÷</li>
  25. </ul>
  26. </div>
  27. </body>
  28. </html>

JS源码:

  1. window.onload=function(){
  2. var lis=document.getElementsByTagName("li");
  3. for(var i=0;i<lis.length;i++){
  4. lis[i].onmousedown=doInput;
  5. lis[i].onmouseover=function(){
  6. this.className="active";
  7. }
  8. lis[i].onmouseout=function(){
  9. this.className="";
  10. }
  11. }
  12. }
  13.  
  14. var refresh=false;
  15. var sum='0';
  16. var preOrder='';
  17.  
  18. function cal(a,b,order){
  19. var res=0;
  20. if(order=='+'){
  21. res=a+b;
  22. }
  23. else if(order=='-'){
  24. res=a-b;
  25. }
  26. else if(order=='×'){
  27. res=a*b;
  28. }
  29. else if(order=='÷'){
  30. res=a/b;
  31. }
  32. else{
  33. res=b;
  34. }
  35. return res;
  36. }
  37.  
  38. function doInput(){
  39. var oInput=document.getElementById("inputFrame");
  40. var iHTML=this.innerHTML;
  41.  
  42. if(iHTML=='='){
  43. oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
  44. refresh=true;
  45. sum='0';
  46. preOrder='';
  47. }
  48. else if(iHTML=='+'||iHTML=='-'||iHTML=='×'||iHTML=='÷'){
  49. oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
  50. refresh=true;
  51. sum=oInput.value;
  52. preOrder=iHTML;
  53. }
  54. else if(iHTML=='C'){
  55. oInput.value='0';
  56. sum='0';
  57. preOrder='';
  58. }
  59. else{
  60. if(refresh){
  61. oInput.value=parseInt(iHTML);
  62. refresh=false;
  63. }
  64. else{
  65. oInput.value=parseInt(oInput.value+iHTML);
  66. }
  67. }
  68. }

CSS源码:

  1. @charset "UTF-8";
  2.  
  3. /* reset.css */
  4. body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
  5. margin: 0;
  6. padding: 0;
  7. }
  8. body{
  9. font-size: 12px;
  10. }
  11. img{
  12. border: none;
  13. }
  14. li{
  15. list-style: none;
  16. }
  17. input,select,textarea{
  18. outline: none;
  19. border: none;
  20. }
  21. textarea{
  22. resize: none;
  23. }
  24. a{
  25. text-decoration: none;
  26. color: #656565;
  27. }
  28. /* 清除浮动 */
  29. .clearfix:after{
  30. content: "";
  31. display: block;
  32. clear: both;
  33. }
  34. .clearfix{
  35. zoom: 1;
  36. }
  37. /* 设置浮动 */
  38. .fl{
  39. float: left;
  40. }
  41. .fr{
  42. float: right;
  43. }
  44.  
  45. /*************************************************************/
  46.  
  47. /* main.css */
  48. #counter{
  49. width: 500px;
  50. height: 420px;
  51. margin: 50px auto;
  52. position: relative;
  53. border: #cfcfcf solid 1px;
  54. }
  55. #counter h3{
  56. margin:10px 0 0 10px;
  57. width: 490px;
  58. height: 30px;
  59. font-size: 23px;
  60. /* font-weight: bold; */
  61. }
  62. #counter input{
  63. width: 490px;
  64. height: 99px;
  65. line-height: 99px;
  66. padding-right: 10px;
  67. font-size: 40px;
  68. font-weight: bold;
  69. text-align: right;
  70. border-bottom: #cfcfcf solid 1px;
  71. }
  72. #counter ul{
  73. width: 500px;
  74. height: 280px;
  75. }
  76. #counter li{
  77. float: left;
  78. width: 125px;
  79. height: 70px;
  80. line-height: 70px;
  81. background-color: #e6e6e6;
  82. /* font-weight: bold; */
  83. font-size: 30px;
  84. text-align: center;
  85. }
  86. #counter .active{
  87. background-color: #cfcfcf;
  88. }

PS:以后这个博客应该不会写ACM的东西了,今年寒假和暑假撸了一下前端,算是入了门吧。也想告别过去一年的ACM生涯了,感觉自己的天赋真的不够,甚至努力程度也不够,兴趣过了之后只觉烦躁,而且不想以后的假期都耗在环境恶劣的学校宿舍,所以打算放弃了。打算开始体验一下后端开发!Kadima!

#js#简单的在线计算器的更多相关文章

  1. js加减乘除在线计算器代码

    js加减乘除在线计算器代码 在线演示本地下载

  2. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  3. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  4. baguetteBox.js - 简单易用的 lightbox 插件

    baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示  ...

  5. 基于PHP实现一个简单的在线聊天功能(轮询ajax )

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  6. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  7. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  9. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

随机推荐

  1. 迟到的 WPF 学习 —— 控件

    这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...

  2. 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 ...

  3. Bundles

    Bundles 接着在Global.asax文件的Application_Start方法中调用BundleConfig.RegisterBundles方法: protected void Applic ...

  4. Atomic变量和Thread局部变量

    Atomic变量和Thread局部变量 前面我们已经讲过如何让对象具有Thread安全性,让它们能够在同一时间在两个或以上的Thread中使用.Thread的安全性在多线程设计中非常重要,因为race ...

  5. Jquery EasyUI tabs处理

    一 获取选中的 Tab 1.   // 获取选中的 tab panel 和它的 tab 对象 2.  var pp = $('#tt').tabs('getSelected'); 3.  var ta ...

  6. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

  7. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  8. Javascript内存泄漏

    Javascript内存泄漏 原文:http://point.davidglasser.net/2013/06/27/surprising-javascript-memory-leak.html 本周 ...

  9. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  10. 设计模式之 - 外观模式 (Facade design pattern)

    1. 模式意图:  为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更容易使用. 2. 结构 3. 工厂方法模式C#实现 using System; ...