案例-跳动倒计时!

最新推荐文章于 2024-04-22 22:22:54 发布

Jikel

最新推荐文章于 2024-04-22 22:22:54 发布

阅读量113

点赞数 1

分类专栏： js有趣小案例

本文链接：https://blog.csdn.net/weixin_54902466/article/details/117885057

版权

js有趣小案例专栏收录该内容

39 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "jikel";
            src: url(./font/font/DS-DIGIT.TTF);
        }

        div {
            transition: .5s;
            border-radius: 3px;

        }

        div:hover {
            top: -3px;
            box-shadow: 0px 5px 10px 3px #D1D1D1;
            transform: scale(1.1);
            /*放大1.1倍*/
        }

        #heart {
            animation: breathe 1s infinite;
            box-shadow: 0px 5px 10px 3px #D1D1D1;
        }

        @keyframes breathe {
            0% {
                transform: scale(.99);
            }

            50% {
                transform: scale(1.03);
            }

            100% {
                transform: scale(.99);
            }
        }
    </style>
</head>

<body>
    <div id="heart" class="demo"></div>
    <script>
        let div = document.querySelector('div')
        div.style.width = '800px'
        div.style.height = '100px'
        div.style.border = '5px solid gold'
        div.style.textAlign = 'center'
        div.style.margin = "100px auto"
        // div.style.backgroundColor = 'aqua'
        div.style.backgroundColor = 'red'
        div.style.color="#fff"
        div.style.borderRadius = "20px"
        div.style.fontFamily = 'jikel'
        function add() {
            div.className = ' div:hover'
            add()
        }
        function stop() {
            // 如何获取时间戳
            let time = + new Date()
            let lastTime = +new Date('2022-5-29-23:00:00')
            console.log(time);
            console.log(lastTime);
            // 毕业倒计时时间
            let newTime = (lastTime - time) / 1000
            console.log();
            // 转换单位
            let d = parseInt(newTime / 60 / 60 / 24);
            let h = parseInt(newTime / 60 / 60 % 24);
            let m = parseInt(newTime / 60 % 60);
            let s = parseInt(newTime % 60);
            // 数组补0
            d = d < 10 ? "0" + d : d
            h = h < 10 ? '0' + h : h
            m = m < 10 ? "0" + m : m
            s = s < 10 ? "0" + s : s
            // 渲染网页
            div.innerHTML = `<h1>拼多多-百亿补贴活动仅剩 : ${d}天 - ${h}时 - ${m}分 - ${s}秒</h1>`
        }
        setInterval(stop, 1000)
    </script>
</body>

</html>

Jikel

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
案例-跳动倒计时!

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.
复制链接

扫一扫