Javascript中的十进制算术

Question

我使用javascript在我的导航栏中实现了一些动画。我想在翻转过来时改变按钮的样式。

我这样做，setInterval增加1，直到达到我需要的值。 第一个CSS属性工作正常，因为它的值是一个整数（填充）。 我决不能用＆＃34; font-size＆＃34;得到相同的结果。可能是由于十进制算术，因为我增加了0.1

在这种情况下，当我将鼠标悬停在主按钮上时我想将字体大小从1rem更改为1.5rem但是当浏览器开始更改样式时它永远不会停止，因为我猜它永远不会匹配clearInterval值

＆＃13;

＆＃13;

function padIn() {

var pos = 25;
   var id = setInterval (frame, 50);
   function frame() {

      if (pos == 21) {
      	  clearInterval(id);
      }	else {
      	  pos--;
      	  el.style.padding = pos + "px";
      }

   }

   var pos2 = 1;
   var id2 = setInterval (frame2, 50);
   function frame2() {

      if (pos2 == 1.5) {
      	  clearInterval(id2);
      }	else {
      	  (pos2 += 0.1).toFixed(2);
      	  el.style.fontSize = pos2 + "rem";
      }

   }

}

function padOut() {

   el.style.color = "white";
   el.style.fontSize = "1rem";
   el.style.padding = "25px";

}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

＆＃13;

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: lightblue;
	position: relative;
}

#nav {
	background-color: orange;
}

#nav li {
	list-style-type: none;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
	padding: 25px;
	font-weight: 700;
}

#nav li:first-child {
	background-color: red;
	color: white;
}

＆＃13;

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

＆＃13;

＆＃13;

＆＃13;

我已经尝试过使用Jquery，它运行正常。我只想用javascript来实现它。 这有什么问题？ THX

Answer 1

一种选择是满足＆＃34;大于或等于＆＃34;：

if (pos2 >= 1.5) {

＆＃13;

＆＃13;

function padIn() {

var pos = 25;
   var id = setInterval (frame, 50);
   function frame() {

      if (pos == 21) {
      	  clearInterval(id);
      }	else {
      	  pos--;
      	  el.style.padding = pos + "px";
      }

   }

   var pos2 = 1;
   var id2 = setInterval (frame2, 50);
   function frame2() {

      if (pos2 >= 1.5) {
      	  clearInterval(id2);
      }	else {
      	  (pos2 += 0.1).toFixed(2);
      	  el.style.fontSize = pos2 + "rem";
      }

   }

}

function padOut() {

   el.style.color = "white";
   el.style.fontSize = "1rem";
   el.style.padding = "25px";

}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

＆＃13;

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: lightblue;
	position: relative;
}

#nav {
	background-color: orange;
}

#nav li {
	list-style-type: none;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
	padding: 25px;
	font-weight: 700;
}

#nav li:first-child {
	background-color: red;
	color: white;
}

＆＃13;

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用较小或相等的比较

if (pos <= 21) {

或更大或相等的比较

if (pos2 >= 1.5) {

防止确切的数字，因为浮点数学。

＆＃13;

＆＃13;

function padIn() {
    var pos = 25;
    var id = setInterval(frame, 50);
    function frame() {
        if (pos <= 21) {
            clearInterval(id);
        } else {
            pos--;
            el.style.padding = pos + "px";
        }
    }

    var pos2 = 1;
    var id2 = setInterval(frame2, 50);
    function frame2() {
        if (pos2 >= 1.5) {
            clearInterval(id2);
        } else {
            (pos2 += 0.1).toFixed(2);
            el.style.fontSize = pos2 + "rem";
        }
    }
}

function padOut() {
    el.style.color = "white";
    el.style.fontSize = "1rem";
    el.style.padding = "25px";
}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

＆＃13;

html { font-size: 16px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: lightblue; position: relative;}
#nav { background-color: orange; }
#nav li { list-style-type: none; display: inline-block; font-family: "Ubuntu", sans-serif; padding: 25px; font-weight: 700; }
#nav li:first-child { background-color: red; color: white; }

＆＃13;

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

＆＃13;

＆＃13;

＆＃13;

Answer 3

欢迎来到浮动精度的精彩世界。

1.5实际上最终可能是1.5000000001，并且不等于1.5。 我建议你阅读https://blog.chewxy.com/2014/02/24/what-every-javascript-developer-should-know-about-floating-point-numbers/

通过将您的等于==更改为＆gt; =您可以解决问题，

但我建议你使用css和过渡http://css3.bradshawenterprises.com/transitions/

＆＃13;

＆＃13;

function padIn() {

var pos = 25;
   var id = setInterval (frame, 50);
   function frame() {

      if (pos >= 21) {
      	  clearInterval(id);
      }	else {
      	  pos--;
      	  el.style.padding = pos + "px";
      }

   }

   var pos2 = 1;
   var id2 = setInterval (frame2, 50);
   function frame2() {

      if (pos2 >= 1.5) {
      	  clearInterval(id2);
      }	else {
      	  (pos2 += 0.1).toFixed(2);
      	  el.style.fontSize = pos2 + "rem";
      }

   }

}

function padOut() {

   el.style.color = "white";
   el.style.fontSize = "1rem";
   el.style.padding = "25px";

}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

＆＃13;

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: lightblue;
	position: relative;
}

#nav {
	background-color: orange;
}

#nav li {
	list-style-type: none;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
	padding: 25px;
	font-weight: 700;
}

#nav li:first-child {
	background-color: red;
	color: white;
}

＆＃13;

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

＆＃13;

＆＃13;

＆＃13;