91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么用原生js實現電子時鐘

發布時間:2022-06-20 09:12:08 來源:億速云 閱讀:172 作者:iii 欄目:開發技術

這篇文章主要介紹“怎么用原生js實現電子時鐘”,在日常操作中,相信很多人在怎么用原生js實現電子時鐘問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么用原生js實現電子時鐘”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

怎么用原生js實現電子時鐘

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數字時鐘</title>
    <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
    <div class="wrap">
        <div class="item">0</div><!-- 0~2 -->
        <div class="item">0</div><!-- 0~9 -->
        <div class="colon">:</div>
        <div class="item">0</div><!-- 0~6 -->
        <div class="item">0</div><!-- 0~9 -->
        <div class="colon">:</div>
        <div class="item">0</div><!-- 0~6 -->
        <div class="item">0</div><!-- 0~9 -->
    </div>
    <script src="clock.js"></script>
</body>
</html>

index.css

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
}
.wrap {
    width: 800px;
    height: 100px;
    background-color: #355da7;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
}
.wrap .item,
.wrap .colon {
    flex: 1;
    text-align: center;
    line-height: 100px;
    font-size: 70px;
    font-weight: 100;
    color: wheat;
}

clock.js

let item = document.getElementsByClassName("item");

function changeTime() {
    setInterval(function() {
        let hour = new Date().getHours();
        let minute = new Date().getMinutes();
        let sec = new Date().getSeconds(); 
        let hourItem = handleTime(hour);
        let minuteItem = handleTime(minute);
        let secItem = handleTime(sec);

        item[0].innerHTML = hourItem[0];
        item[1].innerHTML = hourItem[1];
        item[2].innerHTML = minuteItem[0];
        item[3].innerHTML = minuteItem[1];
        item[4].innerHTML = secItem[0];
        item[5].innerHTML = secItem[1];
    },1000)
}
changeTime();
function handleTime(number) {
    let arr = [];
    //23 =2--3
    //11 =1--1
    //10 % 10 = 1--0
    //5 % 10 = 0--5
    let a = number % 10;
    let b = (number - a) / 10;
    arr.push(b,a);
    return arr;
}

到此,關于“怎么用原生js實現電子時鐘”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

向AI問一下細節

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

js
AI

黄骅市| 聂荣县| 喀喇沁旗| 兴安县| 盐津县| 南岸区| 青海省| 唐河县| 吉林市| 神木县| 武隆县| 寿光市| 许昌县| 平山县| 永胜县| 衢州市| 双江| 三门县| 石河子市| 枣阳市| 雷山县| 长丰县| 安庆市| 涿州市| 新河县| 蚌埠市| 徐闻县| 兰州市| 林州市| 贵州省| 略阳县| 柯坪县| 蓬安县| 睢宁县| 诏安县| 赣州市| 阿拉善右旗| 武邑县| 宁陵县| 綦江县| 高台县|