计算器
/*设置鼠标默认样式；设置阴影*/
*{cursor: default;text-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
/*总体层css*/
.jbody{
width:600px;
height: 800px;
background: #e6e6e6;
border: 1px solid #000;
/*Box阴影：右边阴影 下边阴影 模糊程度(值越大越模糊) 模糊半径*/
box-shadow: 3px 3px 50px 10px rgba(0,0,0,0.3);
}
/*标题层css*/
.jsq{
width:600px;
height: 30px;
/*background-color: red;*/
}
.jsq span{
font-size: 14px;
line-height: 30px;
margin-left: 15px;
}
/*顶部标准层css*/
.top{
width:600px;
height: 40px;
/*background-color: pink;*/
}
.top span{
line-height: 40px;
margin-left: 15px;
font-family: 微软雅黑;
font-size: 2em;
}
/*文本框层css*/
.jtxt{
width:600px;
height: 185px;
/*background-color: blue;*/
}
/*文本框css:去边框,背景字体等*/
#content{
width:100%;
height: 185px;
background: #e6e6e6;
text-align: right;
line-height: 185px;
margin-right: 25px;
font-size: 1em;
font-family: 微软雅黑;
border: none;
}
.jtxt div{
text-align: right;
line-height: 185px;
margin-right: 25px;
font-size: 4em;
font-family: 微软雅黑;
}
/*按钮层css*/
.jbtn{
height: 545px;
width:600px;
/*background-color: yellow;*/
}
*li:hover{
background-color: #d6d6d6;
}
/*第一行按钮*/
.jbtn-lineone{
width: 600px;
height: 110px;
position: absolute;
left: -15px;
top: 255px;
}
.jbtn-lineone ul li{
width: 135px;
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
/*border: 1px solid #000;*/
float: left;
margin-left: 3px;
font-size: 2em;
font-family: 微软雅黑;
background-color: #f0f0f0;
display: block;
}
.jbtn-lineone ul li:hover{
background-color: #d6d6d6;
}
/*第二行按钮*/
.jbtn-linetwo{
width: 600px;
height: 110px;
position: absolute;
left: -15px;
top: 340px;
}
.jbtn-linetwo ul li{
width: 135px;
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
/*border: 1px solid #000;*/
float: left;
margin-left: 3px;
font-size: 2em;
font-family: 微软雅黑;
background-color: #f0f0f0;
}
.jbtn-linetwo ul li:hover{
background-color: #d6d6d6;
}
/*第三行按钮*/
.jbtn-linethree{
width: 600px;
height: 110px;
position: absolute;
left: -15px;
top: 426px;
}
.jbtn-linethree ul li{
width: 135px;
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
/*border: 1px solid #000;*/
float: left;
margin-left: 3px;
font-size: 2em;
font-family: 微软雅黑;
background-color: #fff;
}
.jbtn-linethree ul li:nth-child(4){
background-color: #f0f0f0;
}
.jbtn-linethree ul li:hover{
background-color: #d6d6d6;
}
/*第四行按钮*/
.jbtn-linefour{
width: 600px;
height: 110px;
position: absolute;
left: -15px;
top: 512px;
}
.jbtn-linefour ul li{
width: 135px;
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
/*border: 1px solid #000;*/
float: left;
margin-left: 3px;
font-size: 2em;
font-family: 微软雅黑;
background-color: #fff;
}
.jbtn-linefour ul li:nth-child(4){
background-color: #f0f0f0;
}
.jbtn-linefour ul li:hover{
background-color: #d6d6d6;
}
/*第五行按钮*/
.jbtn-linefive{
width: 600px;
height: 110px;
position: absolute;
left: -15px;
top: 598px;
}
.jbtn-linefive ul li{
width: 135px;
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
/*border: 1px solid #000;*/
float: left;
margin-left: 3px;
font-size: 2em;
font-family: 微软雅黑;
background-color: #fff;
}
.jbtn-linefive ul li:nth-child(4){
background-color: #f0f0f0;
}
.jbtn-linefive ul li:hover{
background-color: #d6d6d6;
}
/*第六行按钮*/
.jbtn-linesix{
width: 600px;
height: 110px;
position: absolute;
left: -15px;
top: 685px;
}
.jbtn-linesix ul li{
width: 135px;
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
/*border: 1px solid #000;*/
float: left;
margin-left: 3px;
font-size: 2em;
font-family: 微软雅黑;
background-color: #f0f0f0;
}
.jbtn-linesix ul li:nth-child(2){
background-color: #fff;
}
.jbtn-linesix ul li:hover{
background-color: #d6d6d6;
}
var content=document.getElementById("content");
var str;
function num(num){
//变量str绑定文本框
str=document.getElementById("content");
//判断文本框内容是否等于0?
//如果等于0,则清空文本框内容再做输入操作
if (str.value=="0") {
str.value="";
}
//文本框内容=当前文本框内容+单击按钮返回的内容
str.value=str.value+num;
}
function clean(){
str=document.getElementById("content");
str.value="0";
}
function result(){
str=document.getElementById("content");
//初始文本框内容=eval(当前文本框内公式计算内容)
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
content=eval(str.value);
str.value=content;
}
function pingfang(){
str=document.getElementById("content");
if (str.value=="0") {
str.value="";
}
//平方运算
str.value=str.value*str.value;
}
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f84e07df8353f7596cb357b2195828a7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();