昨天给部门做一个直播价格计费工具，两年没碰过前端的东西了。着实的生疏。不过好在还没忘记 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

0 条评论

😀😃😄 😁😅😂 🤣😊😇 🙂🙃😉 😌😍🥰 😘😗😙 😚😋😛 😝😜🤪 🤨🧐🤓 😎🥸🤩 🥳😏😒 😞😔😟 😕🙁☹️ 😣😖😫 😩🥺😢 😭😤😠 😡🤬🤯 😳🥵🥶 😱😨😰 😥😓🤗 🤔🤭🤫 🤥😶😐 😑😬🙄 😯😦😧 😮😲🥱 😴🤤😪 😵🤐🥴 🤢🤮🤧 😷🤒🤕 🤑🤠😈 👿👹👺 🤡💩👻 💀☠️👽 👾🤖🎃 😺😸😹 😻😼😽 🙀😿😾 👍👎👏 🙌👐🤲 🤝🤜🤛 ✌️🤞🤟 🤘👌🤏 👈👉👆 👇☝️✋ 🤚🖐️🖖 👋🤙💪 🦾🖕✍️ 🙏💅🤳 💯💢💥 💫💦💨 🕳️💣💬 👁️‍🗨️🗨️🗯️ 💭💤❤️ 🧡💛💚 💙💜🖤 🤍🤎💔 ❣️💕💞 💓💗💖 💘💝💟 ☮️✝️☪️ 🕉️☸️✡️ 🔯🕎☯️ ☦️🛐⛎ ♈♉♊ ♋♌♍ ♎♏♐ ♑♒♓ 🆔⚛️🉑 ☢️☣️📴 📳🈶🈚 🈸🈺🈷️ ✴️🆚💮 🉐㊙️㊗️ 🈴🈵🈹 🈲🅰️🅱️ 🆎🆑🅾️ 🆘❌⭕ 🛑⛔📛 🚫💯💢 ♨️🚷🚯 🚳🚱🔞 📵🚭❗ ❕❓❔ ‼️⁉️🔅 🔆〽️⚠️ 🚸🔱⚜️ 🔰♻️✅ 🈯💹❇️ ✳️❎🌐 💠Ⓜ️🌀 💤🏧🚾 ♿🅿️🈳 🈂🛂🛃 🛄🛅🛗 🚀🛸🚁 🚉🚆🚅 ✈️🛫🛬 🛩️💺🛰️

您的评论由 AI 智能审核，一般1分钟内会展示，若不展示请确认你的评论是否符合社区和法律规范

加载中...

深夜提醒

新年快乐

html

css

js

评论

选择联系方式

留言反馈