jquery简单计算器效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery简单计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin:0; padding:0; border:0; outline:0; } body { background-color:#002121; color:#f2f2f2; font-size:.9em; } .desc { padding-left:50px; position:fixed; top:0; left:0; width:100%; background-color:#f2f2f2; height:40px; color:#212121; line-height:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:none; } .desc span { text-transform:uppercase; font-weight:bold; float:left; margin-right:10px; } .desc p { text-transform:uppercase; } .desc a { padding:10px 15px; text-decoration:none; color:#f2f2f2; background-color:#212121; background-color:rgba(0, 0, 0, .7); border-radius:30px; margin-right:20px; font-size:.7em; display:inline; } .desc a:first-child { margin-left:100px; } .desc-open, .desc-close { font-family:Arial, sans-serif; position:absolute; top:0; right:0; width:60px; height:40px; color:#212121; text-transform:capitalize; background-color:#f2f2f2; text-align:center; line-height:40px; z-index:1000; cursor:pointer; } .desc-close { top:0; right:60px; border-right:5px solid #fafafa; } .fl { float:left; } .expand1 { width:50px; } .expand2 { width:105px; } .clearfix::after, .clearfix::before { height:auto; content: ""; clear:both; line-height:0; visibility:hidden; display:block; text-decoration:none; } .calculator { position:relative; padding:3px; width:300px; background-color:white; border-radius:10px 10px; margin:70px auto 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration:none; } .calculator-frame { border-radius:10px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; background-color:rgba(120, 120, 120, 0.9); text-decoration:none; } .calculator-input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; clear:both; width:100%; background-color:slateGray; font-size:1.3em; padding:10px; color:#f2f2f2; height:60px; border-radius:10px; text-decoration:none; } .calculator-numbers { float:left; width:80%; text-decoration:none; } .calculator-signs { float:right; width:20%; text-decoration:none; } .calculator-buttons { background-color:rgba(120, 120, 120, .5); height:50px; display:block; text-decoration:none; float:left; text-align:center; line-height: 50px; color:#f2f2f2; font-weight:bold; margin:5px 5px 0 0; border-radius: 15px; } .calculator-buttons:active { -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); text-decoration:none; } .calculator-buttons:hover { color:rgba(120, 200, 255, .6); background-color:rgba(120, 120, 120, .6); text-decoration:none; } .calculator-but { display:block; text-align:center; width:100%; height:40px; line-height: 40px; float:left; background-color:#000; background-color:rgba(120, 120, 120, .3); text-decoration:none; color:#f2f2f2; font-weight:bold; border-radius: 15px; } .calculator-but:hover { color:rgba(120, 200, 255, .6); background-color:rgba(120, 120, 120, .6); text-decoration:none; } .error { width:100%; height: 50px; background-color:red; position:absolute; top:0; display:none; left:320px; border-radius:5px; line-height:50px; background-color:rgba(215, 0, 0, .5); text-align:center; } .error::after { content: ""; display:block; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid red; border-right:10px solid rgba(215, 0, 0, .5); width:0; height:0; position:absolute;left:-10px; top:15px; } </style> </head> <body > <div class="calculator"> <div class="calculator-frame clearfix"> <input type="text" class="calculator-input" autofocus /> <div class="calculator-numbers clearfix"> <div><a href="#" class="calculator-buttons expand1">9</a></div> <div><a href="#" class="calculator-buttons expand1">8</a></div> <div><a href="#" class="calculator-buttons expand1">7</a></div> <div><a href="#" class="calculator-buttons expand1">6</a></div> <div><a href="#" class="calculator-buttons expand1">5</a></div> <div><a href="#" class="calculator-buttons expand1">4</a></div> <div><a href="#" class="calculator-buttons expand1">3</a></div> <div><a href="#" class="calculator-buttons expand1">2</a></div> <div><a href="#" class="calculator-buttons expand1">1</a></div> <div><a href="#" class=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0