js实现页面动态加载效果(三个点)

已于 2023-12-14 15:30:18 修改
阅读量355 收藏 1
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-11-07 18:38:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang2556925063/article/details/134273385
版权

实现方式：利用定时函数给div定时添加或去除背景色【记得引入jquery】
完整 代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .father {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:32px;
            height:12px;
        }
        .son {
            float:left;
            border:1px solid #999;
            width:6px;
            height:6px;
            margin:1px;
            border-radius:50%;
        }
    </style>
</head>
<body id="MAX" style="background-color:white;">
    <div onclick="end()" style="width:20px;height:20px;background-color:#999;"></div>
    <div id="father" class="father">
        <div id="son1" class="son"></div>
        <div id="son2" class="son"></div>
        <div id="son3" class="son"></div>
        <div id="son4" class="son"style="display:none;border:unset;"></div>
    </div>
</body>
</html>
<script src="~/Scripts/jquery/jquery-2.1.1.min.js"></script>
<script>
    $(function () {
        jiazai();
    })
    function jiazai() {
        var t = 0;
        var timer = setInterval(function () {
            t++;
            if (t == 1) {
                document.getElementById("son" + t).style.backgroundColor = "#999";
                document.getElementById("son2").style.backgroundColor = "";
                document.getElementById("son3").style.backgroundColor = "";
            } else if (t == 2) {
                document.getElementById("son" + t).style.backgroundColor = "#999";
                document.getElementById("son1").style.backgroundColor = "";
                document.getElementById("son3").style.backgroundColor = "";
            } else if (t == 3) {
                document.getElementById("son" + t).style.backgroundColor = "#999";
                document.getElementById("son1").style.backgroundColor = "";
                document.getElementById("son2").style.backgroundColor = "";
            } else {
                document.getElementById("son3").style.backgroundColor = "";
            }
            if (t == 4) t = 0;
        }, 1000);
    }
    function end() {
        document.getElementById("father").style.display = "none";
        alert("加载结束");
    }
</script>

实现效果如下：
动态加载
完善：
1：每次修改背景色的时候可以修改大小，使用方法

document.getElementById("son3").style.height = "8px";
document.getElementById("son3").style.width= "8px";

2：去除小圆点的不边框。

yang2639408005
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js实现页面loading加载效果1.rar
07-25
// 在页面加载完成时隐藏loading window.onload = function() { hideLoading(); }; ``` 三、优化与扩展 1. 延迟显示：有时我们不希望loading立即显示，而是等待一定时间后再出现，这样可以减少用户的等待感。 ```...
js加载中...三个点动态效果
半兽先生的博客
07-14 1182
要在JavaScript中实现加载中的三个点动起来的效果，您可以使用定时器和字符串拼接来实现。，通过字符串拼接将加载文本和点符号连接起来，实现点符号的循环切换效果。函数设置一个定时器，每隔500毫秒更新一次。数据属性来存储加载文本，并在。上述代码中，我们定义了一个。方法来启动加载动画。
实现动态加载JS脚本有4种方法
xinyuerr的博客
09-13 2607
这里重新温习Document.write()的用法，必须在加载页面的过程中使用，否则将复写整个页面，这里我碰到的问题是，如果用一些异步方法把内容写进页面Body中是不行的，应为IE无法被我们的脚本所阻塞，无法要求加载过程。这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。alert( "主页面动态加载a.js并取其中的变量：" + str );alert( "主页面动态加载a.js并取其中的变量：" + str );
Particles.js 做出各种炫酷粒子动画，动态粒子效果！
最新发布
weixin_39842602的博客
06-04 1370
Particles.js是一个轻量级的JavaScript库，用于在Web页面上创建和管理动态粒子效果。它允许开发者通过简单的配置文件实现复杂的动画效果，为网页增添视觉吸引力。粒子可以是点、线、图像等，能够根据用户交互进行动态变化，Particles.js能够极大地增强用户体验。
HTML面试题整理
weixin_46656013的博客
05-24 519
html面试题整理
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
自定义动态跳动的三个加载小点
豌豆的专栏
11-08 2252
先说下背景把，最近sdk改版，中间有一个加载框，其实就是显示一串提示字，但是有时需要加载的时间比较长，用户又不能做其他操作，时间久了，感觉界面像卡死一样，不然，其实还在加载，体验非常不好，所以想在文字后边加三个加载的小点不停的跳动。技术实现方式 写三个字符串，把这段拼接到文字后边，开个handler 间隔一百毫秒换一个，也可以实现，但是有个问题，如果这样的每个页面都要写个handler 去设置它，并
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点： 首先，动态加载路由的基本思想是将路由配置延迟到应用运行时，而不是在初始化时静态定义。这允许根据用户权限或其他条件动态地决定哪些路由可以被...
城市三级联动js前端显示动态加载
08-24
总结来说，"城市三级联动js前端显示动态加载"涉及的知识点包括： 1. JavaScript基础：变量、条件判断、函数、DOM操作（如`getElementById`、`innerHTML`、事件监听）。 2. 数据结构：理解和处理层次化的数据，如数组...
js实现同一页面多个运动效果的方法
10-24
总之，通过理解并运用这些关键点，开发者可以在JavaScript中轻松地实现同一页面上多个元素的独立运动效果，增强用户界面的交互性和动态感。这种技术在网页动态展示、游戏开发、用户界面动画等多个领域都有广泛应用。...
动态加载JS文件的三种方法
10-26
### 动态加载JS文件的三种方法 在Web开发中，动态加载JavaScript文件是一种常见的需求。这不仅可以提高页面性能，还能让开发者灵活地控制脚本的加载时机。本文将详细介绍三种常用的动态加载JS文件的方法，并通过...
单页面中js动态加载组件
12-28
实现html页面中动态加载js文件，并且能实现加载js文件过程中，程序悬挂；加载完毕代码可以断续向下执行。具体使用方法见js文件内的帮助说明。
如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）
weixin_47826078的博客
10-15 2555
关键： 使用document.createElement函数创建html元素 滤清各元素父子关系并使用appendChild（）函数将其联系 下面给出两个示例代码： 示例代码一 注意：该代码使用了BootStrap5 <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>动态生成控件 CSDN@狱典司</ti
js动态加载div
小麦先生
01-12 5664
添加节点              1              2      222                                                                                               var   newNode=document.createElement(
javascript实现页面加载loading动画(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 1072
javascript实现页面加载loading动画(附完整源码)
页面正在载入(js代码)
taokai的专栏
01-03 1243
页面正在载入(js代码)
html+css+js实现页面加载动画
Infatuatedmonkey的博客
04-12 2995
1，介绍 使用css3的属性来制作动画特效（这里一共写了三个动画，可分别通过个更改style引入来实现不同同的加载动画），通过js定时器来控制动画加载时长，以及过渡到页面的过程。 2，效果图 动画1 动画2 动画3 3，html部分， <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css_loaders</title> </head&g
Vue中 三个点 ... 的用法
weixin_37543822的博客
10-17 250
Vue中 三个点 ... 的用法 主要是操作数组和对象 一、操作数组 // 1.把数组中的元素孤立起来 let iArray = ['1', '2', '3']; console.log(...iArray); // 打印结果 1 2 3 // 2.在数组中添加元素 let iArray = ['1', '2', '3']; console.log(['0', ...iArr...
纯css三个点加载动画
wang_59881的博客
04-23 1179
【代码】纯css三个点加载动画。
vs如何实现页面停留三秒跳转另外一个页面
09-16
2. 在页面加载完成后，通过 JavaScript 代码启动计时器。可以使用 `setTimeout` 函数来延时执行页面跳转的操作。代码示例：`timer = setTimeout(function(){ window.location.href = "另一个页面的URL"; }, 3000);` ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值