-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfile-size.html
123 lines (118 loc) · 4.03 KB
/
file-size.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>无敌波 | 文件大小转换</title>
<!-- common header repeat start -->
<meta charset="UTF-8"/>
<meta name="keywords" content="wudibo,tool,无敌波,在线工具,wudibo在线工具,个人在线工具平台,wudibo个人在线工具平台"/>
<meta name="description" content="这是无敌波的个人在线工具平台，主要提供有各种开发文档API及各种在线小工具。"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.ico"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css"/>
<link rel="stylesheet" href="css/common.css"/>
<!-- common header repeat end -->
<style>
.border-left{border-left:none}
.border-right{border-right:none}
.mt10{margin-top:10px}
</style>
</head>
<body>
<div class="container">
<!--导航栏-->
<div id="navbar"></div>
<!--正文内容-->
<div class="input-group">
<input type="text" class="form-control border-right" placeholder="请输入内容(单位为B)" id="question">
<span class="input-group-addon">=</span>
<input type="text" class="form-control border-left" placeholder="这里是结果" id="answer">
</div>
<div class="input-group mt10">
<input type="text" class="form-control border-right" placeholder="请输入内容(单位为KB)" id="question2">
<span class="input-group-addon" id="basic-addon1">=</span>
<input type="text" class="form-control border-left" placeholder="这里是结果" id="answer2">
</div>
<!--底部信息-->
<div id="footer"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>
<script src="js/nprogress.js"></script>
<script>
// 引入公共页面
$("#navbar").load("common/header.html");
$("#footer").load("common/footer.html");
// 监听文本框变化
$("#question").on('input propertychange', function () {
var _val = $(this).val();
if (isNaN(_val)) {
$("#answer").val("请输入数字类型！");
return;
}
$("#answer").val(getFilesize(_val));
})
/**
* 计算文件大小函数(保留两位小数)
* @param size ,Size为字节大小
* @returns {string}
*/
function getFilesize(size) {
if (!size) {
return "";
}
// byte
let num = 1024.00;
if (size < num) {
return size + "B";
}
if (size < Math.pow(num, 2)) {
// kb
return (size / num).toFixed(2) + "K";
}
if (size < Math.pow(num, 3)) {
// M
return (size / Math.pow(num, 2)).toFixed(2) + "M";
}
if (size < Math.pow(num, 4)) {
// G
return (size / Math.pow(num, 3)).toFixed(2) + "G";
}
// T
return (size / Math.pow(num, 4)).toFixed(2) + "T";
}
// 监听文本框变化
$("#question2").on('input propertychange', function () {
let _val = $(this).val();
if (isNaN(_val)) {
$("#answer2").val("请输入数字类型！");
return;
}
$("#answer2").val(getFilesize2(_val));
})
/**
* 计算文件大小函数(保留两位小数)
* @param size
* @returns {string}
*/
function getFilesize2 (size) {
if (!size) {
return "";
}
let num = 1024.00;
if (size < num) {
return size + "K";
}
if (size < Math.pow(num, 2)) {
return (size / num).toFixed(2) + "M";
}
if (size < Math.pow(num, 3)) {
return (size / Math.pow(num, 2)).toFixed(2) + "G";
}
return (size / Math.pow(num, 3)).toFixed(2) + "T";
}
</script>
</html>