js+css实现二进制背景图案时钟显示时间代码-html代码-BFW代码库

js+css实现二进制背景图案时钟显示时间代码

代码语言：html

所属分类：背景

代码描述：js+css实现二进制背景图案时钟显示时间代码，二进制时钟背景图案从左到右成对读取：小时、分钟、秒。每对包含一个十位列和一个个位列。从上到下，各点代表的数值分别为：8、4、2、1 将每列中激活的点相加，即可得到该位数字。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
/*
vars
*/
:root {
    --bc-dot-color-inner-active: rgba(136, 8, 8, 1.0);
    --bc-dot-color-inner-inactive: rgba(136, 8, 8, 0.0);
    --bc-dot-color-outer-active: rgba(136, 8, 8, 1.0);
    --bc-dot-color-outer-inactive: rgba(136, 8, 8, 1.0);

    --bc-dot-border-width: 1.5px;
    --bc-dot-radius: 5px;
    --bc-dot-radius-outer: calc(var(--bc-dot-radius) - var(--bc-dot-border-width));
    --bc-dot-radius-inner: calc(var(--bc-dot-radius) - var(--bc-dot-border-width) * 2);
    --bc-dot-diameter: calc(var(--bc-dot-radius) * 2);
    --bc-dot-distance: 2px;

    --bc-dot-pos-col-1: calc(var(--bc-dot-radius) + var(--bc-dot-distance));
    --bc-dot-pos-col-2: calc(var(--bc-dot-pos-col-1) + var(--bc-dot-diameter) + var(--bc-dot-distance));
    --bc-dot-pos-col-3: calc(var(--bc-dot-pos-col-2) + var(--bc-dot-diameter) + var(--bc-dot-distance));
    --bc-dot-pos-col-4: calc(var(--bc-dot-pos-col-3) + var(--bc-dot-diameter) + var(--bc-dot-distance));
    --bc-dot-pos-col-5: calc(var(--bc-dot-pos-col-4) + var(--bc-dot-diameter) + var(--bc-dot-distance));
    --bc-dot-pos-col-6: calc(var(--bc-dot-pos-col-5) + var(--bc-dot-diameter) + var(--bc-dot-distance));

    --bc-dot-pos-row-1: calc(var(--bc-dot-radius) + .........完整代码请登录后点击上方下载按钮下载查看