鼠标移动图层和时钟

最新推荐文章于 2024-07-18 16:57:23 发布

一只废狗狗狗狗狗狗狗狗狗

最新推荐文章于 2024-07-18 16:57:23 发布

阅读量61

点赞数

文章标签：计算机外设 javascript 前端

本文链接：https://blog.csdn.net/2303_76561497/article/details/134478227

版权

一，实现完成一个跟随鼠标移动的层，层内内容自己定义

<!DOCTYPE html>
<html>
<head>
    <title>跟随鼠标移动的层</title>
    <style>
        .follow-mouse {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="follow-mouse">
        <h1>自定义内容</h1>
    </div>
    <script>
        document.addEventListener("mousemove", function(event) {
            var followMouse = document.querySelector(".follow-mouse");
            followMouse.style.left = event.pageX + "px";  // 水平方向跟随鼠标移动
            followMouse.style.top = event.pageY + "px";  // 垂直方向跟随鼠标移动
        });
    </script>
</body>
</html>

二，完成一个实时显示的时钟，就是每秒都更新，同时可以自定义年月日时分秒

<!DOCTYPE html>
<html>
<head>
    <title>实时时钟</title>
    <style>
        #clock {
            font-size: 48px;
            text-align: center;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>
    <script>
        function updateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            month = (month < 10 ? "0" : "") + month;
            day = (day < 10 ? "0" : "") + day;
            hours = (hours < 10 ? "0" : "") + hours;
            minutes = (minutes < 10 ? "0" : "") + minutes;
            seconds = (seconds < 10 ? "0" : "") + seconds;
            var time = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds;
            document.getElementById("clock").textContent = time;
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>