整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          《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-sizecolorborder 等屬性值必須重復編寫,若有改動則每一處都要修改。如何解決這個疑難雜癥,許多開發人員轉向 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 代碼。


          主站蜘蛛池模板: 在线免费视频一区二区| 亚洲日本va午夜中文字幕一区| 精品一区二区无码AV| 多人伦精品一区二区三区视频| 久久国产精品最新一区| 中文字幕一区二区三区四区| 中文字幕一区视频| 免费无码一区二区三区蜜桃大 | 国产av一区最新精品| 免费无码一区二区| 无码精品人妻一区二区三区影院 | 亚洲AV成人一区二区三区观看| 台湾无码一区二区| 一区二区国产在线观看| 国产MD视频一区二区三区| 麻豆aⅴ精品无码一区二区| 中文字幕在线一区二区三区| 久久久久人妻精品一区二区三区| 学生妹亚洲一区二区| 精品国产福利在线观看一区| 亚洲国产韩国一区二区| 亚洲av色香蕉一区二区三区| 亚洲日本一区二区一本一道| 亚洲老妈激情一区二区三区| 在线免费观看一区二区三区| 国产午夜福利精品一区二区三区| 国产一区二区在线视频播放| 国产午夜福利精品一区二区三区 | 99精品国产高清一区二区| 国产主播在线一区| 国产一区二区三区露脸| 大帝AV在线一区二区三区| 国产一区二区三区在线电影| 国产福利电影一区二区三区,日韩伦理电影在线福 | 久久久无码精品国产一区| 精品人无码一区二区三区| 国产天堂在线一区二区三区| 蜜桃AV抽搐高潮一区二区| 国产欧美色一区二区三区| 国产一区二区三区在线看| 天堂Aⅴ无码一区二区三区|