昨天给部门做一个直播价格计费工具，两年没碰过前端的东西了。着实的生疏。不过好在还没忘记 jQuery 的语法，琢磨了一下，还是写了出来。不过在最终计算的时候，发现计算结果有点问题，主要是希望能保留2位小数，搜索下发现 JavaScript 有一个 toFixed 函数可以操作，具体如下：
$(document).ready(function(){
$("#M,#N,#T").change(function(){
var ism = $("#M").val();
var isn = $("#N").val();
var ist = $("#T").val();
console.log(ism);
console.log(isn);
console.log(ist);
var sum = (ism/8)*(ist*60)*isn/1024/1024*0.43;
console.log(sum);
$("#count").html(sum.toFixed(2));
});
});最终得到的结果
其中，sum.toFixed(2)就是在获取到值之后保留2位小数，toFixed 可以对第三位进行四舍五入。达到了我的最终需求。
恩，抽空要复习复习前端的东西了。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>直播流量计算</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div>
<div class="logo"><img src="images/168-50.png"></div>
<div class="man">
<div class="man_top">
<p><h1>按流量计费</h1></p>
</div>
<div class="man_content">
<dir class="table" >
<table border="0">
<tr>
<td>视频码率 M</td>
<td>
<select id="M" name="M">
<option value="2560">超清1080P（2560kbps）</option>
<option value="1152">高清720P（1152kbps）</option>
<option value=" 512" selected>标清480P（512kbps）</option>
<option value="256">低清240P（256kbps）</option>
</select>
</td>
</tr>
<tr>
<td>观看并发数 N</td>
<td>
<select id="N" name="N">
<option value="10000">10000人</option>
<option value="1000">1000人</option>
<option value="500">500人</option>
<option value="200">200人</option>
<option value="100" selected>100人</option>
<option value="50">50人</option>
<option value="10">10人</option>
<option value="1">1人</option>
</select>
</td>
</tr>
<tr>
<td>播放时长 T</td>
<td>
<select id="T" name="T">
<option value="1440">24小时</option>
<option value="960">16小时</option>
<option value="480">8小时</option>
<option value="240">4小时</option>
<option value="180">3小时</option>
<option value="120">2小时</option>
<option value="60" selected>1小时</option>
<option value="30">30分钟</option>
<option value="1">1分钟</option>
</select>
</td>
</tr>
<tr>
<td>直播费用 </td>
<td>
<label id="count" >9.45</label>元
</td>
</tr>
</table>
<span class="info"><b>计算公式: </b>(码率/8)*(分钟*60)*观看人数/1024/1024*0.43
比如1个人观看1小时的超清直播。其计算公式是:(2560/8)*(60*60)*1/1024/1024*0.43 =0.472元。
</span>
</div>
</div>
</div>
</div>
</body>
</html>css
.man{
margin-left: auto;
margin-right: auto;
width: 500px;
height: 500px;
border: 1px solid #5da4e5;
border-radius:25px;
}
.man{
background-color: #1E90FF;
}
.man_top{
text-align: center;
background-color: #1E90FF;
color: #FFFFFF;
}
.info b{
font-size: 16px;
color: #333333;
}
.info {
font-size: 14px;
color: #1E90FF;
position: relative;
margin: -25px;
top: 200px;
}
.man_content{
margin-left: auto;
margin-right: auto;
width: 99.7%;
height: 77%;
padding: 1px;
background-color: #FFFFFF;
}js
$(document).ready(function(){
$("#M,#N,#T").change(function(){
var ism = $("#M").val();
var isn = $("#N").val();
var ist = $("#T").val();
console.log(ism);
console.log(isn);
console.log(ist);
var sum = (ism/8)*(ist*60)*isn/1024/1024*0.43;
console.log(sum);
$("#count").html(sum.toFixed(2));
});
});
