基于Jquery实现的计算器小插件

主要使用Jquery制作的模拟Win10计算器小插件

1.创建html文件,引入头文件

(1)引入jquery.min.js
(2)引入font-awesome.min.css 字体库
引入代码为:

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css" />

2.创建类名为jsq的div

即:引用插件的时候,只需要将类名取为 jsq,就可以成功引入

<div class="jsq"></div>

3.创建css文件

控制计算器整个的样式
PS: 使用时不要忘记在html中使用link引入
具体实现代码:

@charset "utf-8";
.jsq{
   position: relative;left: 100px;top: 100px;
   width: 200px;height: 310px;
   background: #eeeeec;
   border: 1px solid #aac;
  }
  .title{
   width: 100%;height: 25px;
  }
  .title .text{
   font-size:12px ;padding-left: 5px;
  }
  .title  div{
   display: inline-block;width: 30px;height: 20px;
   font-size:12px ;text-align: center;
   float: right;
  }
  .back:hover{
   background: #ddd;
  }
  .title .close:hover{
   background: #f22;color: #eee;
  }
  .menu{
   width: 100%;height: 35px;
  }
  .menu .history{
   width: 20px;height: 20px;padding-top: 7px; padding-left: 7px; 
   float: right;
  }
  .menu .list{
   width: 20px;height: 20px;padding-top: 7px; padding-left: 7px; 
  }
  .menu span,.menu .mode{
   padding-left: 5px;
  }
  .sum{
   width: 95%;height: 20px;
   text-align: right;font-size: 10px;
  }
  .input{
   width: 95%;height: 30px;
   text-align: right;font-size: 22px;font-weight: bold;
   overflow: hidden;
  }
  .opts{
   width: 100%;height: 25px;
  }
  .opts .button{
   width: 14.366%;height:16px;display: inline-block;
   font-size: 10px;padding-top: 3px;font-weight: bold;
   text-align: center;margin: 2px 1.2px 2px 1.2px;
   border: 1px solid #eee;cursor: pointer;
      -webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
  }
  .opts .button:hover{
   border: 1px solid #aaa;background: #ddd;
  }
  .buttons{
   width: 100%;
  }
  .buttons .button{
   width: 22.8%;height:20px;display: inline-block;
   font-size: 12px;padding-top: 3px;
   text-align: center;margin: 2px 1.2px 2px 1.2px;
   border: 1px solid #eee;cursor: pointer;
   -webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
  }
  .buttons .button:hover{
   border: 1px solid #aaa;background: #ddd;
  }
  .numback{
   background: #fafafa;font-weight: bold;
  }
  .othback{
   background: #f4f4f4;
  }

4.创建js文件

整个的js文件来实现动态过程
包括响应事件,以及计算器的逻辑计算

具体插件 请到百度网盘下载
链接：https://pan.baidu.com/s/1uDXU7KF5ugdM3ULjQPA6TA
提取码：la3r

5.插件效果图