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);

解析数字
- parseInt（0.9）==＆gt; 0
- parseFloat（0.9）==＆gt; 0.9
不需要额外的vars up down

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

Answer 3

尽管已经有一个已接受的答案，但我想补充一点，我认为它仍然没有按照预期的方式运作。

这是my demo的链接（我认为应该有效的方式）。这是我更正的代码版本：

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);

Div不透明度不起作用

3 个答案: