JavaScript Switch 时间显示

最新推荐文章于 2024-07-19 15:50:46 发布

无心打爆然健

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量154

点赞数

文章标签： css

本文链接：https://blog.csdn.net/lysliuyue/article/details/119219818

版权

用JS实现XXXX年XX月XX日 XX时XX分XX秒效果：

代码Html：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>时间显示上课</title>

    <link rel="stylesheet" href="css/style.css">

</head>



<body>

    <div class="container">

        <span id="time">0000年00月00日 00时00分00秒</span>

    </div>

    <div class="btngroup">

        <button id="start" onclick="but1()">开始</button>

        <button id="stop" onclick="but2()">暂停</button>

    </div>

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

</body>

</html>

代码css：

@charset "utf-8";

/* CSS Document */

*{

    margin: 0;

    padding: 0;

}

body{

    background: #368cef;

    color: #fff;

}

.container{

    margin: 100px auto;

    text-align: center;

    font-size: 4rem;

    font-weight: 300;

}

.container span{

    display: inline-block;

}

.btngroup{

    text-align: center;

}

.btngroup button{

    margin: 0px 10px;

    padding: 30px 100px;

    border:none;

    border-radius: 5px;

    font-size: 2rem;

    color:#fff;

    cursor: pointer;

}

.btngroup button:first-child{

    background: rgb(0, 255, 157);

}

.btngroup button:last-child{

    background: #e00202;

}

代码js：

// JavaScript Document

var timer=null;

function but1()

{

    var o;

    var oDay = new Date();

    var a = oDay.getHours();

    var b = oDay.getMinutes();

    var c = oDay.getSeconds();

    var d = oDay.getFullYear();

    var f = oDay.getMonth()+1;

    var g = oDay.getDate();

   

    f = cTime(f);

    b = cTime(b);

    c = cTime(c);

    o = a+":"+b+":"+c;

    // console.log(o);

    document.getElementById("time").innerHTML=d+"年"+f+"月"+g+"日"+o;

    t=setTimeout('but1()',1000);

}

function but2()

{

    clearInterval(t);

}



function cTime(i)

{

    if(i<10)

    {

        i="0"+i;

    }

    return i;

}

这是我所学到的，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教（大神勿喷）。

无心打爆然健

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Switch 时间显示

用JS实现XXXX年XX月XX日 XX时XX分XX秒效果：代码Html：<!doctypehtml><html><head><metacharset="utf-8"><title>时间显示上课</title><linkrel="stylesheet"href="css/style.css"></head><body>...
复制链接

扫一扫