Convertisseur de durée

Démo

Source

<style>
    #demo {
        background: #eee;
        padding: .5rem;
        border-radius: 0.25rem;
        text-align: center;
    }

    input[type=text] {
        padding: .2rem;
        border: 1px solid #a5a4a4;
        border-radius: 0.25rem;
        height: 1.5rem;
        width: 150px;
    }

    input[type=button], input[type=submit], input[type=reset] {
        border: none;
        color: #FFF;
        background: #963c7b;
        margin: .5rem 0;
        padding: .5rem;
        cursor: pointer;
        text-decoration: none;
        color: #FFF;
        border-radius: 0.25rem;
    }

    label {
        width: 150px;
        display: inline-block;
    }
</style>
<div id="demo">
    <form method="get">
        <label>Source</label>
        <label></label>
        <label>Résultat</label>
        <br/>
        <input size="5" id="d" type="text" />
        <label>Jour</label>
        <input size="5" id="rd" type="text" disabled />
        <br/>
        <input size="5" id="h" type="text" />
        <label>Heure</label>
        <input size="5" id="rh" type="text" disabled />
        <br/>
        <input size="5" id="m" type="text" />
        <label>Minutes</label>
        <input size="5" id="rm" type="text" disabled />
        <br/>
        <input size="5" id="s" type="text" />
        <label>Secondes</label>
        <input size="5" id="rs" type="text" disabled />
        <br/>
        <label id="txt"></label>
        <br/>
        <input type="submit" value="Convertir" onClick="return convert()"/>
        <input type="reset" value="Reset" />
    </form>
</div>
<script>
    function convert() {
        var d = getValue("d");
        var h = getValue("h");
        var m = getValue("m");
        var s = getValue("s");
        var total = 0;

        total = s + m * 60 + h * 60 * 60 + d * 24 * 60 * 60;

        document.getElementById("rd").value = Math.round((total / 60 / 60 / 24) * 100) / 100;
        document.getElementById("rh").value = Math.round((total / 60 / 60) * 100) / 100;
        document.getElementById("rm").value = Math.round((total / 60) * 100) / 100;
        document.getElementById("rs").value = Math.round((total) * 100) / 100;

        //text format
        var td, th, tm, ts;
        ts = total % 60;
        tm = Math.floor(total / 60);
        th = Math.floor(tm / 60);
        tm = tm % 60;
        td = Math.floor(th / 24);
        th = th % 24;
        document.getElementById("txt").innerHTML = td + "j " + th + "h " + tm + "m " + ts + "s"; 
        return false;
    }

    function getValue(id) {
        val = document.getElementById(id).value;
        if (val != "")
            val = parseInt(val);
        else
            val = 0;
        return val
    }
</script>