js,html,css,倒计时的字体，背景颜色实时变化。

最新推荐文章于 2024-09-20 20:00:10 发布

Junju_

最新推荐文章于 2024-09-20 20:00:10 发布

阅读量600

点赞数

分类专栏： javascript项目

本文链接：https://blog.csdn.net/m0_58451019/article/details/124032867

版权

javascript css html

javascript项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<div style="width: 100%;height: 900px; background-color: black;">
</div>

<div id="show" style=" position: absolute; left: 30%; top:30%; width: 1000px; text-align: center; ">
</div>

<script type="text/javascript">

    function get16scale(){
        var Color = "#";
        //随机一个 0-15之间的数值，并转化为 16进制
        for(var i = 0;i<6;i++){
            Color += Math.floor( Math.random()*16 ).toString(16)
        }
        return Color;
    }
    function getTime(){
        var date = new Date();
        var hour = date.getHours() < 10 ?"0"+date.getHours():date.getHours();
        var min = date.getMinutes() < 10 ?"0"+date.getMinutes():date.getMinutes();
        var sec = date.getSeconds() < 10 ?"0"+date.getSeconds():date.getSeconds();

        document.getElementById("show").innerHTML = "<div style='font-size: 200px; color:"+get16scale()+" ; background-color: "+get16scale()+"; ' >"+ hour + ":"+ min+":" + sec +"</div>"
    }
    getTime()
    setInterval(
        function(){
            getTime()
        }
        ,1000
    )
</script>




</body>
</html>