Question

我对js和jq的熟练程度不够，认为这段代码看起来很糟糕：

    var updateTimerApple = function() {
        var timerApple = localStorage.getItem('timerApple');
        if (  timerApple < 0 ) {
            $(".apple").css("display", "none"); 
        }   
        else if (timerApple == 0) {
            $(".apple").html("Apple ok").css("display", "block");
        }
        else {
            timerApple--;
            localStorage.setItem('timerApple', timerApple);
            var hours = Math.floor(timerApple / 3600);
            var minute = Math.floor((timerApple - (hours * 3600)) / 60);
            var second = timerApple - (hours * 3600) - (minute * 60);
            if (hours < 1) hours = "0" + hours;
            if (minute < 10) minute = "0" + minute;
            if (second < 10) second = "0" + second;
            $(".apple").html("Apple tree:"+" "+hours+"ч"+" "+minute+"м"+" "+second+"с"+" ");
            $(".apple").css("display", "block");
        }
    };
    var updateTimeroak = function() {
        var timeroak = localStorage.getItem('timeroak');
        if (  timeroak < 0 ) {
            $(".oak").css("display", "none");   
        }   
        else if (timeroak == 0) {
            $(".oak").html("Oak ok").css("display", "block");;
        }
        else {
            timeroak--;
            localStorage.setItem('timeroak', timeroak);
            var hours = Math.floor(timeroak / 3600);
            var minute = Math.floor((timeroak - (hours * 3600)) / 60);
            var second = timeroak - (hours * 3600) - (minute * 60);
            if (hours < 1) hours = "0" + hours;
            if (minute < 10) minute = "0" + minute;
            if (second < 10) second = "0" + second;
            $(".oak").html("Oak:"+" "+hours+"ч"+" "+minute+"м"+" "+second+"с"+" ");
            $(".oak").css("display", "block");
        }
    };
    $(function() {
        setInterval(updateTimerApple, 1000);
        $(".startApple").click( function() {
            localStorage.setItem('timerApple', 51480);
            $(".apple").removeAttr('style');        
        });
        $(".apple").click( function() {
            localStorage.removeItem('timerApple');
            $(".apple").css({"display": "none", "visibility": "hidden","width":"0","height":"0", "padding":"0", "margin":"0"});      
        });
    });
    $(function() {
        setInterval(updateTimeroak, 1000);
        $(".startoak").click( function() {
            localStorage.setItem('timeroak', 176400);   
            $(".oak").removeAttr('style');      
        });
        $(".oak").click( function() {
            localStorage.removeItem('timeroak');
            $(".oak").css({"display": "none", "visibility": "hidden","width":"0","height":"0", "padding":"0", "margin":"0"});        
        });
    });

<body>
<div class="content">
<div class="menu">
<button class="startApple">Apple</button>
<button class="startoak">Oak</button>
</div>
<div class="item apple"></div>
<div class="item oak"></div>
</div>
</body>

或http://jsfiddle.net/38N6x/1/

它工作正常，但我正在努力改进它，使它更通用。寻找这样的东西：

function updateTimer(n,t) {
    this.n=n;
    this.t=localStorage.getItem('n');
    if (  t < 0 ) {
        $(".apple").css("display", "none"); 
    }   
    else if (t == 0) {
        $(".apple").html("Apple ok").css("display", "block");
    }
    else {
        this.t--;
        localStorage.setItem('n', this.t);
        var hours = Math.floor(t / 3600);
        var minute = Math.floor((t - (hours * 3600)) / 60);
        var second = t - (hours * 3600) - (minute * 60);
        if (hours < 1) hours = "0" + hours;
        if (minute < 10) minute = "0" + minute;
        if (second < 10) second = "0" + second;
        $(".apple").html("Apple tree:"+" "+hours+"ч"+" "+minute+"м"+" "+second+"с"+" ");
        $(".apple").css("display", "block");
    }
};
$(function() {
    setInterval(updateTimer, 1000);
    $(".startApple").click( function() {
        var apple = new updateTimer ("apple", 23)
        $(".apple").removeAttr('style');        
    });
    $(".apple").click( function() {
        localStorage.removeItem('apple');
        $(".apple").css({"display": "none", "visibility": "hidden","width":"0","height":"0", "padding":"0", "margin":"0"});      
    });
});

但是这段代码不起作用。浏览器总是返回NaN for $（“。apple”）。html（“Apple tree：”+“”+ hours +“ч”+“”+ minute +“м”+“”+ second +“с”+“”）; < / p>

请求任何帮助。

Answer 1

花了一些时间后，我找到了代码优化的方法。

JS

function catDate(catID, catTime) {
    var s = new Date();
    s.setSeconds(s.getSeconds() + catTime);
    localStorage.setItem(catID, s);
}
function CountDownTimer(dt, id) {
    var end = new Date(dt);
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;
    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (dt == 0) {
            document.getElementById(id).style.display='none';
            return;
        }
        else if(distance < 0) {
            document.getElementById(id).innerHTML = 'Сan collect';
            document.getElementById(id).style.display='block';
            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
        document.getElementById(id).innerHTML = days + 'd ';
        document.getElementById(id).innerHTML += hours + 'h ';
        document.getElementById(id).innerHTML += minutes + 'm ';
        document.getElementById(id).innerHTML += seconds + 's ';
        document.getElementById(id).style.display='block';
    }
    timer = setInterval(showRemaining, 1000);
}
CountDownTimer(localStorage.getItem('apple'), 'apple');
CountDownTimer(localStorage.getItem('oak'), 'oak');
$(function() {
    $(".startapple").click( function() {
        catDate("apple", 5);
    });
    $("#apple").click( function() {
        localStorage.setItem('apple', 0);
    });
});
$(function() {
    $(".startoak").click( function() {
        catDate("oak", 2000);
    });
    $("#oak").click( function() {
        localStorage.removeItem('oak');
    });
});
$(function() {
    $('div').click( function() {
        location.reload();
    });
});

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Farm Frenzy</title>
<link rel="stylesheet" media="screen" href="css/style.css"/>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>  
<script type='text/javascript' src='js/items.js'></script> 
<script type='text/javascript' src='js/itemscall.js'></script>
</head>
<body>
<div class="content">
<div class="menu">
<button class="startapple">Apple</button>
<button class="startoak">Oak</button>
</div>
<div id="apple" class="item"></div>
<div id="oak" class="item"></div>
</body>
</html>

但仍有一个问题：如果用户添加新计时器（或设置localStorage.setItem（'item'，0），用于计时器隐藏），计时器仅在页面刷新后显示（或隐藏）。用

修正了这个问题

$(function() {
    $('div').click( function() {
        location.reload();
    });
});

但我正在寻找更好的方法。

尝试使用localStorage为JS倒计时编写改进代码

1 个答案: