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

最新推荐文章于 2023-09-20 09:37:26 发布

Junju_

最新推荐文章于 2023-09-20 09:37:26 发布

阅读量563

点赞数

分类专栏： javascript项目文章标签： javascript css html

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

版权

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>

Junju_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js,html,css,倒计时的字体，背景颜色实时变化。

<!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=" p.
复制链接

扫一扫