bootstrap实现简单自适应计算器效果代码
代码语言:html
所属分类:图表
代码描述:bootstrap实现简单自适应计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> table { width: 100%; height: 100%; } th, td { padding: 5px; height: 100%; } .calculator { max-width: 420px; background: #9dd2ea; border-radius: 5px; margin: 0 auto; padding: 20px; } .screen { background-color: rgba(0, 0, 0, .2); border-radius: 0.25rem; border: 0; color: #fff; display: block; font-size: 20px; height: 40px; letter-spacing: 2px; line-height: 40px; padding: 0 10px; text-align: right; width: 100%; } .btn { display: block; width: 100%; position: relative; top: 0; } .btn:active:focus, .btn:active { box-shadow: 0 0 rgba(0, 0, 0, .2) !important; top: .15rem; } .btn:focus { box-shadow: none; } .btn-info { box-shadow: 0px .15rem rgba(0, 0, 0, .2); } .btn-light { box-shadow: 0px .15rem rgba(0, 0, 0, .2); } .btn-danger { box-shadow: 0px .15rem rgba(0, 0, 0, .2); } .btn-primary { box-shadow: 0px .15rem rgba(0, 0, 0, .2); } .btn-success { box-shadow: 0px .15rem rgba(0, 0, 0, .2); } .btn-result { height: 100%; } </style> </head> <body > <div class="calculator" id="calculator"> <table> <tr> <th colspan="5"> <input type="text" form-control class="screen" readonly> </th> </tr> <tr> <td><button data-val="^" data-type='func' class="btn btn-info">x<sup>2</sup></button></td> <td><button data-val="√" data-type='func' class="btn btn-info">√</button></td> <td><button data-val="d" data-type='d' class="btn btn-danger">DEL</button></td> <td><button data-val="c" data-type='c' class="btn btn-danger">AC</button></td> </tr> <tr> <td><button data-val="%" data-type='func' class="btn btn-info">%</button></td> <td><button data-val="π" data-type='func' class="btn btn-info">π</button></td> <td><button data-val="/" data-type='func' class="btn btn-primary">/</button></td> <td><button data-val="x" data-type='func' class="btn btn-primary">x</button></td> </tr> <tr> <td><button data-val="7" data-type="num" class="btn btn-light">7</button></td> <td><button data-val="8" data-type="num" class="btn btn-light">8</button></td> <td><button data-val="9" data-type="num" class="btn btn-light">9</button></td> <td><button data-val="-" data-type='func' class="btn btn-primary">-</button></td> </tr> <tr> <td><button data-val="4" data-type="num" class="btn btn-light">4</button></td> <td><button data-val="5" data-type="num" class="btn btn-light">5</button></td> <td><button data-val="6" data-type="num" class="btn btn-light">6</button></td> <td><button data-val="+" data-type='func' class="btn btn-primary">+</button></td> </tr> <tr> <td><button data-val="1" data-type="num" class="btn btn-light">1</button></td> <td><button data-val="2" data-type="num" class="btn btn-light">2</button></td> <td><button data-val="3" data-type="num" class="btn .........完整代码请登录后点击上方下载按钮下载查看
网友评论0