【无标题】

暖暖心语

于 2022-04-19 20:46:03 发布

阅读量72

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_48322694/article/details/124282987

版权

jQuery 图片轮播定时器实时时间 DOM操作

关键词由CSDN通过智能技术生成

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery 使用

图片轮播效果

<!DOCTYPE html>
<html lang="en">
<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>图片轮播</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <img src="../day01/img/1.jpg" alt="女孩">
    <script>
        var index = 0;
        var imgsArr = ["../day01/img/1.jpg",
        "../day01/img/2.jpg",
        "../day01/img/3.jpg"];
        function imggo(){
            index++;
            $("img").attr("src",imgsArr[index%imgsArr.length]);
        }
        setInterval(imggo , 1000);
    </script>
</body>
</html>

就不截图了

显示时间

<!DOCTYPE html>
<html lang="en">
<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>网页时钟</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        div{
            width: auto;
            height: auto;
            background-color: #7c5eff;
            font-size: 100px;
            text-align: center;
            color: rgb(255, 238, 88);
            border-radius: 20px
            
        }
    </style>
</head>
<body>
    <div>时间</div>
    <script>
        function times(){
            var datec = new Date();
            $("div").text(datec.toLocaleTimeString()+"--"+datec.toLocaleDateString());
        }
        setInterval(times , 100);
    </script>
</body>
</html>