JQuery与计时器

龙，学习中......

已于 2023-05-11 15:04:47 修改

阅读量277

点赞数

分类专栏： Web 文章标签： html css javascript jquery

于 2022-04-19 21:22:54 首次发布

本文链接：https://blog.csdn.net/weixin_57595610/article/details/124283919

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery与计时器配合使用

- - 1、实现图片轮播的效果，即：图片不停的切换
  - 2、本地同步显示时间（即，在页面上显示实际的时间）

1、实现图片轮播的效果，即：图片不停的切换

<!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.min.js"></script>
    <style>
        #img {
            width: 1200px;
            height: 750px;
        }
    </style>
</head>

<body>
    <img id="img" src="../../img/1.jpeg" alt="图片">
    <script>
        var imgs = new Array("../../img/1.jpeg", "../../img/2.jpg", "../../img/3.png");
        function cutImg() {
            var index = 0;
            function cut() {
                index++;
                $("#img").attr("src", imgs[index % 3]);
            }
            return cut;
        }
        var imgCut = cutImg();
        setInterval("imgCut();", 1000);
    </script>
</body>

</html>

2、本地同步显示时间（即，在页面上显示实际的时间）

<!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.min.js"></script>
</head>

<body>
    <h1 id="h"></h1>
    <script>
        $("#h").css({ "background-color": "gray", "font-size": "50px", "color": "pink", "text-align": "center" });
        var date;
        function flush() {
            date = new Date().toLocaleString();
            $("#h").text(date);
        }
        setInterval("flush();", 100);
    </script>
</body>

</html>

龙，学习中......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery与计时器

JQuery与计时器1、实现图片轮播的效果，即：图片不停的切换2、本地同步显示时间（即，在页面上显示实际的时间）1、实现图片轮播的效果，即：图片不停的切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
复制链接

扫一扫

专栏目录