时间计时（JQ）-洋葱先生-杨少通

关键代码如下：

<meta charset="utf-8" />

<title></title>

<style>

    .content {

        width: 400px;

        height: 400px;

        border-radius: 50%;

        background: #F26A2F;

        margin: 0 auto;

        padding: 1px;

    }

    #RuningTime {

        width: 80%;

        height: 50px;

        opacity: 0;

        line-height: 50px;

        text-align: center;

        margin: 175px auto;

        background: #fff;

    }

    #offline {

        display: none;

    }

</style>

<script src="../js/jquery.js"></script>

<script>

    function two_char(n) {

        return n >= 10 ? n : "0" + n;

    }

    var clear;

    function time_fun() {

        $("#RuningTime").css("opacity", "1");

        $("#login").css("display", "none");

        $("#offline").css("display", "block");

        var sec = 0;

        clear = setInterval(function () {

            sec++;

            var date = new Date(0, 0);

            date.setSeconds(sec);

            var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();

            document.getElementById("RuningTime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);

        }, 1000);

    }

    function clear_fun() {

        clearInterval(clear);

        document.getElementById("RuningTime").innerText =  "00:00:00";

        $("#RuningTime").css("opacity", "0");

        alert("下线成功");

        $("#login").css("display", "block");

        $("#offline").css("display", "none");

    }

</script>

<div class="content">

    <h1 id="RuningTime">00:00:00</h1>

    <button id="login" onclick="time_fun()">登录</button>

    <button id="offline" onclick="clear_fun()">下线</button>

</div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

功能适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗、IE

样式请自行调整

来源：洋葱先生

如有转载请注明来源： www.dreamload.cn/blog/?p=286&preview=true （洋葱先生）

最后

以上就是安静香菇为你收集整理的时间计时（JQ）-洋葱先生-杨少通的全部内容，希望文章能够帮你解决时间计时（JQ）-洋葱先生-杨少通所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。