Javascript 尝试使用localStorage对JS倒计时进行代码改进_Javascript_Countdowntimer

Javascript 尝试使用localStorage对JS倒计时进行代码改进

javascript

Javascript 尝试使用localStorage对JS倒计时进行代码改进,javascript,countdowntimer,Javascript,Countdowntimer,我对js和jq不够熟练，认为这段代码看起来很糟糕： var updateTimerApple = function() { var timerApple = localStorage.getItem('timerApple'); if ( timerApple < 0 ) { $(".apple").css("display", "none"); } else if (timerApp

我对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>

var updateTimerApple=function（）{
var timerApple=localStorage.getItem（'timerApple'）；
if（timerApple<0）{
$（“.apple”）.css（“显示”、“无”）；
}   
else if（timerApple==0）{
$（“.apple”）.html（“苹果ok”）.css（“显示”、“块”）；
}
否则{
时间陷阱--；
setItem（'timerApple'，timerApple）；
var小时=数学地板（timerApple/3600）；
变量分钟=数学楼层（（timerApple-（小时*3600））/60）；
var second=时间间隔（小时*3600）-（分钟*60）；
如果（小时数<1）小时数=“0”+小时数；
如果（分钟<10）分钟=“0”+分钟；
如果（秒<10）秒=“0”+秒；
$（“.apple”）.html（“苹果树：“+”+hours+“ч”+“+minute+”М”+“+second+”С”+”）；
$（“.apple”）.css（“显示”、“块”）；
}
};
var updateTimeroak=函数（）{
var timeroak=localStorage.getItem（'timeroak'）；
if（timeroak<0）{
$（“.oak”）.css（“显示”、“无”）；
}   
else if（timeroak==0）{
$（“.oak”）.html（“oak ok”）.css（“显示”、“块”）；；
}
否则{
时间漫游--；
setItem（'timeroak'，timeroak）；
变量小时数=数学下限（timeroak/3600）；
变量分钟=数学地板（（timeroak-（小时*3600））/60）；
var second=时间漫游-（小时*3600）-（分钟*60）；
如果（小时数<1）小时数=“0”+小时数；
如果（分钟<10）分钟=“0”+分钟；
如果（秒<10）秒=“0”+秒；
$（“.oak”）.html（“oak:+”+“+hours+”ч“+”+“+minute+”М“+”+“+second+”С“+”）；
$（“.oak”）.css（“显示”、“块”）；
}
};
$（函数（）{
setInterval（updateTimerApple，1000）；
$（“.startApple”）。单击（函数（）{
setItem（'timerApple'，51480）；
$（“.apple”）.removeAttr（'style'）；
});
$（“.apple”）。单击（函数（）{
localStorage.removietem（'timerApple'）；
$（“.apple”）.css（{“display”：“none”，“visibility”：“hidden”，“width”：“0”，“height”：“0”，“padding”：“0”，“margin”：“0”}）；
});
});
$（函数（）{
setInterval（updateTimeroak，1000）；
$（“.startoak”）。单击（函数（）{
setItem（'timeroak'，176400）；
$（“.oak”）.removeAttr（'style'）；
});
$（“.oak”）。单击（函数（）{
localStorage.removietem（'timeroak'）；
$（“.oak”）.css（{“display”：“none”，“visibility”：“hidden”，“width”：“0”，“height”：“0”，“padding”：“0”，“margin”：“0”}）；
});
});
苹果
橡树

或

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

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

函数更新程序（n，t）{
这个，n=n；
this.t=localStorage.getItem（'n'）；
if（t<0）{
$（“.apple”）.css（“显示”、“无”）；
}   
else如果（t==0）{
$（“.apple”）.html（“苹果ok”）.css（“显示”、“块”）；
}
否则{
这是我的；
setItem（'n'，this.t）；
var小时=数学楼层（t/3600）；
变量分钟=数学楼层（（t-（小时*3600））/60）；
var秒=t-（小时*3600）-（分钟*60）；
如果（小时数<1）小时数=“0”+小时数；
如果（分钟<10）分钟=“0”+分钟；
如果（秒<10）秒=“0”+秒；
$（“.apple”）.html（“苹果树：“+”+hours+“ч”+“+minute+”М”+“+second+”С”+”）；
$（“.apple”）.css（“显示”、“块”）；
}
};
$（函数（）{
setInterval（updateTimer，1000）；
$（“.startApple”）。单击（函数（）{
var apple=新的更新程序（“apple”，23）
$（“.apple”）.removeAttr（'style'）；
});
$（“.apple”）。单击（函数（）{
localStorage.removietem（'apple'）；
$（“.apple”）.css（{“display”：“none”，“visibility”：“hidden”，“width”：“0”，“height”：“0”，“padding”：“0”，“margin”：“0”}）；
});
});

但是这个代码不起作用。浏览器总是以$（“.apple”）.html（“苹果树：“+”+hours+“ч”+“+minute+”М”+“+second+”С”+”）返回NaN

谢谢您的帮助。

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

但我在寻找更好的方法

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

<!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>

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