纪念日计时器,有对象的看过来

橧易灬

已于 2022-03-09 19:52:03 修改

阅读量542

点赞数 1

分类专栏： JavaScript 文章标签： javascript css3 css

于 2022-01-09 23:23:53 首次发布

本文链接：https://blog.csdn.net/weixin_56667794/article/details/122401484

版权

纪念日计时器

修改位置
代码内容
最终样式

修改位置

请在177行修改目标时间,以及目标时间名字
200行修改过去时间想说的话
205行修改未来时间想说的话

代码内容


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>遇</title>
    <!-- 这是网页标题 -->
    <style>
        body {
    
            overflow: hidden;
            margin: 0;
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11695386033%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643859661&t=56c2c6c10490dd71ced649cc1dc90ac0);
            background-size: 100% 100%;
        }

        h1 {
    
            position: fixed;
            top: 30%;
            left: 0;
            width: 100%;
            text-align: center;
            transform: translateY(-50%);
            font-family: 'Love Ya Like A Sister', cursive;
            font-size: 60px;
            color: #000000;
            padding: 0 20px;
        }

        h1 span {
    
            position: fixed;
            left: 0;
            width: 100%;
            text-align: center;
            margin-top: 30px;
            font-size: 40px;
        }

        h2 {
    
            position: fixed;
            top: 30%;
            left: 0;
            width: 100%;
            text-align: center;
            transform: translateY(-50%);
            font-family: 'Love Ya Like A Sister', cursive;
            font-size: 60px;
            padding: 0 20px;
            color: #ff0000;
        }
    </style>

</head>

<body>
<!-- 请在177行修改目标时间,以及目标时间名字 -->
<!-- 200行修改过去时间想说的话 -->
<!-- 205行修改未来时间想说的话 -->
    <h1 id="h1"></h1>
    <canvas></canvas>
    <!--canvas 画布-->

    <script>
        var canvas = document.querySelector("canvas"),
            ctx = canvas.getContext("2d");

        var ww, wh;

        function onResize() {
    
            ww = canvas.width = window.innerWidth;
            wh = canvas.height = window.innerHeight;
        };

        function col() {
    
            var h = parseInt(Math.random() * 100 + 150);
            var s = parseInt(Math.random() * 5 + 80);
            var l = pars