四舍五入保留两位小数（基于字符串的练习）
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>保留小数</title>
<style>
/*flex弹性布局*/
*{margin: 0;padding: 0;box-sizing: border-box;}
header{height: 200px;background-color: #f00;}
/*样式计算兼容到IE9*/
section{height: calc(2*(100vh - 200px)/3)}
footer{height:calc((100vh - 200px)/3);background-color: #ff0;}
</style>
</head>
<body>
<!--display:flex多兰多列布局，兼容性不太好-->
<header>我是固定高度200px</header>
<section>
我是自适应高度（是底部的2倍）
<input type="number" name="number">
<button type="submit">点击输出小数</button>
<div></div>
</section>
<footer>我是自适应高度是内容部分的二分之一</footer>
</body>
</html>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
button.onclick=function(){
// 1.调用Number()来对string进行值类型转换。
// 2.parseInt()。
// 3.parseFloat()。
// toFixed将number保留2位小数（必须是number类型）
// var q = Number(a.value).toFixed(2)
// d.innerHTML=q
// concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
// indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 (返回的是一个索引值)。
// charAt() – 返回指定位置的字符。
// substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
var num = input.value
var index = num.indexOf('.')
var a = num.substring(index+1,index + 3)
if(index == -1||a.length<=2){
console.log(Number(num).toFixed(2))
div.innerHTML=Number(num).toFixed(2)
}else{
var str = num.substring(0,index + 2);
var before =num.substring(index + 2,index + 3);
var lest =num.substring(index + 3,index + 4);
if(Number(lest)<5){
//字符串拼接concat的用法
str.concat(before)
console.log(str.concat(before))
div.innerHTML=str.concat(before)
}else if(Number(lest)>=5){
str.concat(String(Number(before)+1))
console.log(str.concat(String(Number(before)+1)))
str.concat(str.concat(String(Number(before)+1)))
}
}
}
</script>
测试一下
页:
[1]