JavaScript实现二进制时钟

写在前面

成品可以看我blog右侧侧边栏~

实现的思路

首先创建了六个li是因为 11 11 11转到十进制为63 刚好够用 不多也不少
当前的秒数(1-60的十进制) 转到二进制六位二进制) 不足前面补0
document.getElementsByClassName获取ul节点下面的子节点(children)
之后再根据子节点的第x为对应的二进制的第x为改变 直接for即可

时钟的看法(使用方法)

使用方法

三行点点,第一二三行分别对应的是 小时 分钟 秒钟
空心的是0 实心的是 1 直接转到十进制即可 如
oo●ooo
ooo●oo
oooooo
第一行为 001000 转到十进制是 8
第二行为 001000 转到十进制是 4
第三行为 000000 转到十进制是 0
现在的时间就为08:04:00

JavaScript时钟的实现

实现布局

布局代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .time ul{
            list-style-type: none;
            padding:0;
            margin: 0;
        }
        .time ul>li{
            width:20px;
            height:20px;
            font-size: 20px;
            display:inline-block;
        }
        .container{
            width:80%;
            margin-left:auto;
            margin-right:auto;
        }
        .text-center{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container text-center">
        <div class="time">
            <ul class="hour">
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
            </ul>
            <ul class="minute">
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
            </ul>
            <ul class="second">
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
                <li>o</li>
            </ul>
        </div>
    </div>
</body>
</html>

用JavaScript实现功能

    <script>
        var second=document.getElementsByClassName('second')[0].children;
        var minute=document.getElementsByClassName('minute')[0].children;
        var hour=document.getElementsByClassName('hour')[0].children;
        function DecToBin(Dec){
            return Dec.toString(2).padStart(6, '0');
        }
        function BinToDec(Dec){
            return parseInt(Dec,2)
        }
        function start(data,obj){
            for(var i = 0; i < obj.length;i++){
                obj[i].innerHTML= (data[i] == 1) ? '●' : 'o' ;
            }
        }
        setInterval(function(){
            var date=new Date();
            start(DecToBin(date.getSeconds()),second)
            start(DecToBin(date.getMinutes()),minute)
            start(DecToBin(date.getHours()),hour)
        },1000);
    </script>

成品下载

成品下载

Last modification:May 25th, 2018 at 10:38 am
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 香港服务器

    朋友 交换链接吗

    1. ┈━═☆
      @香港服务器

      可以啊

Leave a Comment