<td id="aqqih"></td>

<dd id="aqqih"></dd>
  1. <span id="aqqih"></span>
  2. <ol id="aqqih"></ol>

    如何使用JavaScript代碼實現動態數字時鐘

    這篇文章主要介紹“如何使用JavaScript代碼實現動態數字時鐘”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“如何使用JavaScript代碼實現動態數字時鐘”文章能幫助大家解決問題。

    代碼實現

    <!DOCTYPE?html>
    <html?lang="en">
    <head>
    ????<meta?charset="UTF-8">
    ????<title>Document</title>
    ????<style>
    ????????*?{
    ????????????padding:?0;
    ????????????margin:?0;
    ????????}
    ????????#box?{
    ????????????width:?1000px;
    ????????????height:?300px;
    ????????????background-image:url(1.jpg);
    ????????????line-height:?300px;
    ????????????text-align:?center;
    ????????????font-size:?50px;
    ????????????font-weight:?500;
    ????????????margin:?100px?auto;
    ????????}
    ????</style>
    </head>
    <body>
    ????<div?id="box"></div>
    ????<script>
    ????????let?box?=?document.getElementById('box')
    ????????//不足十位補零
    ????????let?addZero?=?val?=>?val?<?10???'0'?+?val?:?val
    ????????//把阿拉伯數字的星期轉化為中國漢字的星期?//?星期映射表
    ????????let?trans?=?val?=>?{
    ????????????let?obj?=?{
    ????????????????0:?'日',
    ????????????????1:?'一',
    ????????????????2:?'二',
    ????????????????3:?'三',
    ????????????????4:?'四',
    ????????????????5:?'五',
    ????????????????6:?'六'
    ????????????}
    ????????????return?obj[val]
    ????????}
    ????????setTime?()
    ????????//獲取時間的方法
    ????????function?setTime()?{
    ????????????let?time?=?new?Date();
    ????????????let?year?=?time.getFullYear();?//?獲取年
    ????????????let?month?=?time.getMonth()?+?1;?//?獲取月(是從0到11,所以我們要給他加1)
    ????????????let?date?=?time.getDate();?//?獲取日
    ????????????let?day?=?time.getDay();?//?獲取星期幾(0是星期日)
    ????????????let?hour?=?time.getHours();?//?獲取小時
    ????????????let?min?=?time.getMinutes();?//?獲取分鐘
    ????????????let?sec?=?time.getSeconds();?//?獲取秒
    ????????????let?value?=?year?+?'年'?+?addZero(month)?+?'月'?+?addZero(date)?+?'日?星期'?+?trans(day)?+?'?'+addZero(hour)?+
    ????????????????'時'?+?addZero(min)?+?'分'?+?addZero(sec)?+?'秒'
    ????????????//?把所有的時間拼接到一起
    ????????????box.innerText?=?value
    ????????????//?console.log(value)
    ????????????//?把拼接好的時間插入到頁面
    ????????}
    ????????//?讓定時器每間隔一秒就執行一次setTime這個方法(這是實現時鐘的核心)
    ????????setInterval(setTime,?1000)
    ????</script>
    </body>
    </html>

    關于“如何使用JavaScript代碼實現動態數字時鐘”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注蝸牛博客行業資訊頻道,小編每天都會為大家更新不同的知識點。

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    評論

    日本韩欧美一级A片在线观看
    <td id="aqqih"></td>

    <dd id="aqqih"></dd>
    1. <span id="aqqih"></span>
    2. <ol id="aqqih"></ol>