javascript - Div 不透明度不起作用

Question

我的 div 上有一个计时器，它改变了 div 的不透明度。但由于某种原因，数学不断将其设置为 0.1。我不知道为什么！

这是我的代码：

function do_it(div){
  var opac = parseInt(div.style.opacity);

 if(opac == 1){
   var dir = 'down';
 } else if(opac == 0) {
   var dir = 'up';
 }

 if(dir == 'down'){
    opac -= 0.1;
 } else {
    opac += 0.1;
 }

 if(opac > 1){
   opac = 1;
 } else if(opac < 0){
   opac = 0;
 }

div.style.opacity = opac;
div.timer = setTimeout(function(){ do_it(div) }, 1000);

}

提供了一个小提琴：

JSFiddle

div 不透明度应该从 1 变为 0 并以0.1

Answer 1

这是你的问题

var opac = parseInt(div.style.opacity);

它应该是 parseFloat

var opac = parseFloat(div.style.opacity);

Answer 2

function do_it(div,output){
  var opac = parseFloat(div.style.opacity);
  opac -= 0.1;
  if(opac<=0.05){
    opac = 1;
  }
  div.style.opacity = opac;
  output.innerHTML = opac;
  div.timer = setTimeout(function(){ do_it(div,output) }, 1000);
}

var div = document.getElementById('test');
var output = document.getElementById('op');
do_it(div,output);

1. 解析一个数字

   • parseInt(0.9) ==> 0

   • parseFloat(0.9) ==>0.9

2. 不需要额外的变量up down

http://jsfiddle.net/ckBFy/29/

Answer 3

即使已经有一个公认的答案，我想补充一点，我认为它仍然没有按照预期的方式工作。

这是我的演示的链接（我认为它应该工作的方式）。这是我更正的代码版本：

way = 'down';
function do_it(div,output){

    var opac = parseFloat(div.style.opacity);

    if(opac >= 1){
        way = 'down';
    } 
    else if(opac <= 0.2) {
        way = 'up';
    }
    if (way === 'down'){
        opac -= 0.1;
    }
    else{
        opac += 0.1;
    }

    div.style.opacity = opac;
    output.innerHTML = opac;

    div.timer = setTimeout(function(){ do_it(div,output) }, 1000);
}

var div = document.getElementById('test');
var output = document.getElementById('op');
do_it(div,output);