案例--点击方块变形出时间

最新推荐文章于 2023-07-13 21:43:13 发布

张敬坤

最新推荐文章于 2023-07-13 21:43:13 发布

阅读量72

点赞数 1

分类专栏： JavaScript

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

版权

JavaScript 专栏收录该内容

55 篇文章 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>

    </style>
</head>

<body>
    <div id="box">
        <div class="box2">
            <h3>点击我会出现时间</h3>
        </div>
    </div>

    <script>
        // 用来描述程序的行为和状态的改变,触发一系列回调函数的响应
        // 事件源.addEventListener('事件类型',回调函数)
        // 控制整体样式
        let box = document.getElementById('box')
        box.style.cssText = ('width: 200px; height: 200px; background-color: aqua; margin: 100px auto;transition: all .4s;text-align: center; line-height: 200px;')
        let box2 = document.querySelector('.box2')
        box2.style.display = 'none'
        let i = true
        // 控制时间
        setInterval(function () {
            let time = {
                author: 'jikel',
                date: new Date(),
                year: function () {
                    return this.date.getFullYear()
                },
                month: function () {
                    let month1 = this.date.getMonth() + 1
                    month1 = month1 < 10 ? '0' + month1 : month1
                    return month1
                },
                week: function () {
                    return this.date.getDate()
                },
                day: function () {
                    let day1 = this.date.getDate()
                    day1 = day1 < 10 ? '0' + day1 : day
                    return day1
                },
                h: function () {
                    let h1 = this.date.getHours()
                    h1 = h1 < 10 ? '0' + h1 : h1
                    return h1
                },
                f: function () {
                    let f1 = this.date.getMinutes()
                    f1 = f1 < 10 ? "0" + f1 : f1
                    return f1
                },
                s: function () {
                    let s1 = this.date.getSeconds()
                    s1 = s1 < 10 ? "0" + s1 : s1
                    return s1
                }
            }
            box2.innerHTML = `今日时间 -- ${time.h()}:${time.f()}:${time.s()}`
        }, 1000)
        // 点击事件
        box.addEventListener('click', function () {

            if (i) {
                box.style.borderRadius = '50px'
                box.style.boxShadow = ' 0px 5px 10px 3px #D1D1D1'
                box.style.backgroundColor = 'gold'
                box.style.transform = 'scale(1.5)'
                box2.style.display = 'block'
                i = false
            } else {
                box.style.borderRadius = '0px'
                box.style.boxShadow = ' 0px 0px 0px 0px #D1D1D1 '
                box.style.backgroundColor = 'aqua'
                box.style.transform = 'scale(1)'
                box2.style.display = 'none'
                i = true
            }

        })
    </script>
</body>

</html>

张敬坤

关注

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&..
复制链接

扫一扫

专栏目录