昨天给部门做一个直播价格计费工具，两年没碰过前端的东西了。着实的生疏。不过好在还没忘记 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>视频码率&nbsp;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>观看并发数&nbsp;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>播放时长&nbsp;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>直播费用&nbsp;</td>
			<td>
			<label id="count" >9.45</label>元
			</td>
			</tr>
		</table>
		<span class="info"><b>计算公式:&nbsp;</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));
  });
  });

文章作者：阿文

文章链接： https://www.awen.me/post/247353623.html