CSS引用LCD 字体简单倒计时功能_font-family lcd-优快云博客

本文分享了如何使用CSS和HTML实现LCD字体的倒计时功能，包括LCD字体的下载和应用，以及JavaScript代码实现倒计时逻辑。

无意中看到一个LCD 字体, 就想着把字体弄成以前看着比较有意思的LCD倒计时广告牌,所以今天就分享一个LCD 倒计时demo

直接贴代码

#LCD 字体下载(两个下载链接都是一样的,防止失效,放两个下载链接)

#CSS 部分代码

@font-face {
    /*这里是说明调用来的字体名字*/
    font-family: lcd;
    /*这里是字体文件路径*/
    src: url('lcd.ttf');
}

.num-lcd-red{
    font-family: lcd;
    color:#FF0000;
    font-size: 300px
}

#HTML 部分代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS引用LCD 字体 简单倒计时功能</title>
    <link rel="stylesheet" type="text/css" href="font-lcd.css">
</head>
<body>
<h1 class="num-lcd-red">10</h1>
</body>

<script>
    var numDOM = document.getElementsByClassName("num-lcd-red")[0], num=numDOM.innerHTML;
    countDown();
    /**
     * 倒计时的方法
     */
    function countDown() {
        if (num == 0) {
            numDOM.innerHTML = "倒计时结束";
            return;
        }
        numDOM.innerHTML = num;
        num -= 1;
        setTimeout(function () {
            countDown();
        }, 1000);
    }
</script>

</html>

#效果图点我查看