主要使用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