整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

《JavaScript笔记》-有关小数点的控制显示（五）

s中控制小数点的显示位数

< script language = " JScript " >

Number.prototype.toFixed = function(num)

{

// 重新构造toFixed方法,IE5.0+

with(Math) this .NO = round( this .valueOf() * pow( 10 ,num)) / pow( 10 ,num);

return String( / /. / g.exec( this .NO) ? this .NO: this .NO + " . " + String(Math.pow( 10 ,num)).substr( 1,num));

}

alert(( 12.9299 ).toFixed( 2 ));

alert(( 12.9999 ).toFixed( 2 ));

</ script >

控制保留几位有效小数的js函数

//Code CreateBy abandonship 2007.03.12

function FormatAfterDotNumber( ValueString, nAfterDotNum )

{

var ValueString,nAfterDotNum ;

var resultStr,nTen;

ValueString = ""+ValueString+"";

strLen = ValueString.length;

dotPos = ValueString.indexOf(".",0);

if (dotPos == -1)

{

resultStr = ValueString+".";

for (i=0;i<nAfterDotNum ;i++)

{

resultStr = resultStr+"0";

}

return resultStr;

}

else

{

if ((strLen - dotPos - 1) >= nAfterDotNum ){

nAfter = dotPos + nAfterDotNum + 1;

nTen =1;

for(j=0;j<nAfterDotNum ;j++){

nTen = nTen*10;

}

resultStr = Math.round(parseFloat(ValueString)*nTen)/nTen;

return resultStr;

}

else{

resultStr = ValueString;

for (i=0;i<(nAfterDotNum - strLen + dotPos + 1);i++){

resultStr = resultStr+"0";

}

return resultStr;

}

}

}

应用时只需要FormatAfterDotNumber( ’数字字符串’, 保留小数位数 );

for example:

<html>

<head>

<SCRIPT LANGUAGE="JAVAscript">

<!--调用上面的函数 -->

</script>

</head>

<body>

<input type="text" name="strTemp">

<input type="button" onclick="alert( FormatAfterDotNumber( document.all. strTemp.value), 保留小数位)" >

</body>

</html>

一个替代js自带的toFixed函数的方法和优点

之前一直在用这个js自带的toFixed函数来进行四舍五入的操作，可是，在实际使用过程中却遇到了问题。

比如

Javascript代码

  1. var money=0.00542;//0.006;

  2. alert(Number(money).toFixed(2));

  3. //0.00

可以看出上面的结果是错误的，下面的方法通过巧妙的使用Math.round函数，完全可以解决数值很小时的精度问题。

Javascript代码

  1. var money=0.00542;//0.006;

  2. alert(Number(money).toFixed(2));

  3. function round2(number,fractionDigits){

  4. with(Math){

  5. return round(number*pow(10,fractionDigits))/pow(10,fractionDigits);

  6. }

  7. }

  8. alert(round2(money,2));//0.01

round 方法

返回与给出的数值表达式最接近的整数。

Math.round(number)

必选项 number 参数是要舍入到最接近整数的值。

说明

如果 number 的小数部分大于等于 0.5，返回值是大于 number 的最小整数。否则，round 返回小于等于 number 的最大整数。

js保留小数位数的某人总结

一、问题的产生：

自己在编码时，在javascript中遇到了3.21*3=9.629999999999999的现象

二、百度一下

得到如下信息：

用Javascript取float型小数点后两位，例22.127456取成22.13,如何做？

1. 最笨的办法....... [我就怎么干的.........]

function get()

{

var s = 22.127456 + "";

var str = s.substring(0,s.indexOf(".") + 3);

alert(str);

}

2. 正则表达式效果不错

<script type="text/javascript">

onload = function(){

var a = "23.456322";

var aNew;

var re = /([0-9]+/.[0-9]{2})[0-9]*/;

aNew = a.replace(re,"");

alert(aNew);

}

</script>

3. 他就比较聪明了.....

<script>

var num=22.127456;

alert( Math.round(num*100)/100);

</script>

4.会用新鲜东西的朋友....... 但是需要 IE5.5+才支持。

<script>

var num=22.127456;

alert( num.toFixed(2));

</script>

三、总结后，自己写了个javascript多位数四舍五入的通用方法

//num表示要四舍五入的数,v表示要保留的小数位数。

function decimal(num,v)

{

var vv = Math.pow(10,v);

return Math.round(num*vv)/vv;

}

Math对象

属性

LN10 (10的自然对数)

PI (3.1415926...)

SQRT1_2 (1/2的平方根)

方法

abs(x) 返回x的绝对值

acos(x) 返回x的arc cosine值

asin(x) 返回x的arc sin值

atan(x) 返回x的arc tangent值

ceil(x) 返回大于等于x的最小整数

cos(x) 返回x的cosine值

exp(x) 返回e的x次方

floor(x) 返回小于等于x的最大整数

log(x) 返回x的

max(x,y) 返回x,y中的大值

min(x,y) 返回x,y中的小值

pow(x,y) 返回x的y次方

round(x) 舍入到最近整数,(小于或等于0.5小数舍去)

sin(x) 返回x的sin值

sqrt(x) 返回x的平方根

tan(x) 返回x的tangent值

js浮点数相加、减、乘、除精确计算

说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。

//调用：accAdd(arg1,arg2)

//返回值：arg1加上arg2的精确结果

function accAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2))

return (arg1*m+arg2*m)/m

}

//说明：javascript的减法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的减法结果。

//调用：accSub(arg1,arg2)

//返回值：arg1减上arg2的精确结果

function accSub(arg1,arg2){

return accAdd(arg1,-arg2);

}

//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。

//调用：accMul(arg1,arg2)

//返回值：arg1乘以arg2的精确结果

function accMul(arg1,arg2)

{

var m=0,s1=arg1.toString(),s2=arg2.toString();

try{m+=s1.split(".")[1].length}catch(e){}

try{m+=s2.split(".")[1].length}catch(e){}

return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)

}

//说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。

//调用：accDiv(arg1,arg2)

//返回值：arg1除以arg2的精确结果

function accDiv(arg1,arg2){

var t1=0,t2=0,r1,r2;

try{t1=arg1.toString().split(".")[1].length}catch(e){}

try{t2=arg2.toString().split(".")[1].length}catch(e){}

with(Math){

r1=Number(arg1.toString().replace(".",""))

r2=Number(arg2.toString().replace(".",""))

return (r1/r2)*pow(10,t2-t1);

}

}

欢迎关注公众号（hongji8410）和加入QQ群一起交流（522342554）

录：

  1. 什么是算术运算符？
  2. 算术运算符有哪些？

一、什么是算术运算符？

运算符是处理数据的基本方法，用来从现有的值得到新的值。JavaScript 提供了多种运算符，覆盖了所有主要的运算。

二、算术运算符有哪些？

  1. 加法运算符：x + y
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var num1 = 1;
var num2 = 2;

console.log(num1+num2);//3
</script>

</body>
</html>

2. 减法运算符： x - y

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var num1 = 2;
var num2 = 1;

console.log(num1-num2);//1
</script>

</body>
</html>

3. 乘法运算符： x * y

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var num1 = 2;
var num2 = 1;

console.log(num1*num2);//2
</script>

</body>
</html>

4. 除法运算符：x / y

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var num1 = 9;
var num2 = 3;

console.log(num1/num2);//3
</script>

</body>
</html>

5. 余数运算符：x % y

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var num1 = 9;
var num2 = 3;

console.log(num1%num2);//0
</script>

</body>
</html>

下节预告：赋值运算符

大多数人想到在 Web 上进行计算时，他们会想到 JavaScript。考虑到 JavaScript 是 Web 的主要编程语言，这是有道理的，但是如果我告诉你，你可以只用 CSS 进行相当复杂的计算。老实说，它非常神奇且无限有用。

什么是 CSS 计算？

首先，我们需要谈谈 CSS calc 是什么以及如何使用它。用最简单的术语来说，CSS calc 只是一个 CSS 函数，类似于rgb,var等，它可以让您对各种 CSS 单元进行加法、减法、除法和乘法运算。这是一个简单的例子。

.class {
  width: calc(200px + 100px);
}

上面的 CSS 将这个框的宽度设置为 300px（200px 加上 100px）。

诚然，这不是很有用。我的意思是我们可以只写 300px 并节省大量时间，但这只是 CSS calc 的开始。

组合不同的单位

使用 CSS calc，我们可以将不同的 CSS 单元组合在一起，以创建传统 CSS 单元无法表示的值。例如，如果我们想创建一个距离 100vw 宽 30px 的盒子怎么办。本质上是一个 100vw 的盒子，其中移除了 30px 的空间。

.class {
  width: calc(100vw - 30px);
}

这就是你需要做的。只需将 100vw 和 30px 放入您的 calc 函数中，CSS 就会为您处理所有复杂的数学运算。现在，无论您的屏幕多宽或多小，框总是比屏幕的全宽小 30 像素。现在，仅此一项就足以使 CSS calc 令人惊叹，但是您可以更进一步，将其与 CSS 变量结合使用。

CSS 变量和计算

现在，我们可以讨论如何在 calc 中使用 CSS 变量。您需要做的就是用变量替换 calc 函数中的一个值。例如：

.class {
  --w: 100px;
  width: calc(var(--w) * 2);
}

我们现在有一个 200px 宽的盒子，因为我们将 100px--w变量乘以 2。那--w是什么呢？那在这里也说一下css的自定义属性。

自定义属性的由来

在很长一段时间内，原生 CSS 在代码复用方面有所欠缺，例如典型的例子 - 主题，每一个 font-size、color、border 等属性值必须重复编写，若有改动则每一处都要修改。如何解决这个疑难杂症，许多开发人员转向 CSS 预处理器（例如 SASS、Less）来处理 CSS 中的变量。在过去的几年里，CSS 一直忙于添加新特性，其中一个特性就是自定义属性。这些自定义属性是 CSS 的变量版本，比任何预处理器变量都强大得多。

自定义属性(变量)

属性名能够自定义，属性值是任意合法 CSS 值。属性名以 -- 开头，大小写敏感，如 --auto-color: red，通过 var(--auto-color defaultValue) 引用

body {
  --auto-color: red
}
child {
  width: var(--auto-color, black)
}

默认会被继承，所以定义在 :root 伪类下，则所有子元素都可以获取到。

若自定义属性不合法或不存在，会被该属性的默认值替换，例如:

child {
  width: var(--auto-color1,red)  //block
}

自定义属性默认值

由于自定义属性是 CSS 的一部分，而不是像在预处理器中那样从代码中编译出来，因此可以在 JavaScript 中访问和修改它们。让我们使用下面的 CSS 来演示如何在 JavaScript 中访问和修改自定义属性。

:root {
  --color: red;
}
.custom-btn {
  --background-color: blue;
  color: var(--color);
  background-color: var(--background-color);
}

我们在两个元素上都设置了自定义属性，.custom-btn类以及文档根，在 Web 开发的情况下是 html 元素。我们该如何在 JavaScript 中获取这些属性的值呢？请看下面例子：

/* 这个将从根元素返回变量color值 */
getComputedStyle(document.documentElement).getPropertyValue('--color')
const customButton = document.querySelector('.custom-btn')
getComputedStyle(customButton).getPropertyValue('--color')
getComputedStyle(customButton).getPropertyValue('--background-color')

代码首先获取元素的计算样式。这将确保--color正确计算所有继承的值，例如自定义按钮的值。然后该getPropertyValue函数用于获取属性的值，就好像它是任何其他 CSS 属性一样。

至于设置自定义属性的值，则更加简单。

document.documentElement.style.setProperty('--color', 'green')
const customButton = document.querySelector('.custom-btn')
customButton.style.setProperty('--background-color', 'yellow')

设置自定义属性就像设置任何其他 CSS 属性一样。首先需要访问元素的样式，然后setProperty可以通过传递要设置的属性名称和要设置的值来使用该函数。那我们回过头来说calc。

用 Calc 转换单位

除了在 calc 中使用 CSS 变量之外，您还可以将没有单位的值转换为有单位的值，只需将该值乘以您要转换为的单位类型的 1。如果您在 JS 中设置了不包含单位的 CSS 变量，这将非常有用。

.class {
  --fav-num: 3;
  width: calc(var(--fav-num) * 1px);
}

使用这个简单的计算函数，我将--fav-num变量从无单位值转换为基于像素的值。

CSS 计算陷阱

幸运的是，calc 使用起来非常简单，但有一个问题需要注意。CSS calc 函数内部的间距非常重要。calc 函数中的每个值和它们之间的运算之间必须有一个空格。calc 函数的括号前也不能有空格。例如，以下所有内容都是无效的 CSS。

.class {
  width: calc(1px+ 2px);
  width: calc(1px +2px);
  width: calc(1px+2px);
  width: calc (1px + 2px);
}

五、兼容

calc兼容性还是蛮好的!自定义属性不支持IE!

结论

CSS calc和自定义属性是非常有用的功能，看起来它只有一个小众用例，但实际上开辟了很多可能性。虽然大家普遍习惯用Sass或者Less,但是我还是强烈建议您在下一个项目中使用 calc和自定义属性,因为它极大地简化了 CSS 代码。


在线咨询
上一篇：niushop阿里云短信配置
下一篇：推荐收藏丨程序员们平时都喜欢逛什么论坛呢？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 梅州 东方 秀洲区 宜城市 禹城 双滦区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服