js+css实现小费计算器效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现小费计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; letter-spacing: 0.4px; } body{ background-color: #f3f3f3; height: 100%; background: linear-gradient( 135deg, #f46d6d, #f44a4a ) fixed; background-size: 100% 50%; background-repeat: no-repeat; } .container{ background-color: #ffffff; width: 450px; padding: 50px 40px; border-radius: 10px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; box-shadow: 0 30px 50px rgba(0,0,0,0.1); } .wrapper{ display: flex; align-items: center; justify-content: space-between; margin: 12px 0; } .lbl{ font-size: 16px; color: #44475b; font-weight: 400; } .val{ color: #44475b; font-weight: 500; font-size: 18px; } .input-box{ background-color: #fdcccc; color: #f44a4a; padding: 5px; } #bill{ background-color: transparent; border: none; outline: none; width: 100px; text-align: right; color: #f44a4a; } hr{ border: none; border-bottom: 1px solid #fdcccc; } input[type="range"]{ width: 100%; cursor: pointer; } input[type="range"]:not(:last-child){ margin-bottom: 5px; } section:not(:last-child){ margin-bottom: 40px; } section:not(:first-child){ margin-top: 40px; } section:last-child{ background-color: #f46d6d; padding: 5px; border-radius: 5px; } section:last-child .val, section:last-child .lbl{ color: #333; } </style> </head> <body> <div class="container"> <section> <div class="wrapper"> <label for="bill" class="lbl"> Bill </label> <div class="input-box"> <span>$</span> <input type="number" value="0.00" id="bill" class="val"> </div> </div> <div class="wrapper"> <span class="lbl">Tip</span> <span id="tip-amount" class="val"> $0 </span> </div> <hr> <div class="wrapper"> <span class="lbl">Total Amount</span> <span id="total-amount" class="val"> $0 </span> </div> </section> <section> <div class="wrapper"> <label for="tip&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0