位置: 编程技术 - 正文
JS+CSS实现网页加载中的动画效果(给网页添加javascript)
编辑：rootadmin推荐整理分享JS+CSS实现网页加载中的动画效果(给网页添加javascript)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html+css+js网页制作,html+css+js网页,网站html加css,网页css样式怎么添加,js添加css,网页css样式怎么添加,网站html加css,html+css+js网页制作,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例为大家分享了JS实现网页加载中效果的具体代码，供大家参考，具体内容如下
需要材料：
一张loading动画的gif图片
基本逻辑：
模态框遮罩 + loading.gif动图，默认隐藏模态框页面开始发送Ajax请求数据时，显示模态框请求完成，隐藏模态框
下面我们通过Django新建一个web应用，来简单实践下
实践
1.新建一个Django项目，创建应用app, 配置好路由和static，略。将gif动图放到静态文件夹下，结构如下：
2.视图中定义一个函数，它返回页面test.html：
3.test.html页面如下：
4.CSS样式如下：
说明：
通过设置position: fixed，并令上下左右为0，实现模态框覆盖整个页面； 设置gif动态图为背景，居中，来显示加载效果； 通过设置z-index值，令gif图悬浮在模态框上面； background-color: black;是为了看着明显，具体使用时可以设为white;5.JS文件如下：
说明：
页面载入后，开始发送Ajax请求，从服务端ajax_handler视图请求数据，这时显示模态框请求完成后，不论成功与否，隐藏模态框
6.ajax_handler视图如下，它模拟网络延迟，并返回一些字符串：
效果如下：
如果显示不了gif动图，可能是浏览器缓存问题。项目完整代码在这里：
浅析Javascript中双等号(==)隐性转换机制 在Javascript中判断相等关系有双等号(==)和三等号(===)两种。其中双等号(==)是值相等，而三等号(===)是严格相等（值及类型是否完全相等）。因此有几个常
js通过Date对象实现倒计时动画效果 js通过Date对象实现倒计时效果，具体内容如下!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title倒计时动画/titlestylediv{text-align:center;height:px;line-height:px;}/styles
elemetUi 组件--el-upload实现上传Excel文件的实例 elemetUi组件--el-upload实现上传Excel文件的实例【需求】实现上传Excel文件，在上传到服务器时，还要附加一个参数，在请求上传文件接口前，先要进行文件
标签: 给网页添加javascript
本文链接地址:https://www.jiuchutong.com/biancheng/368454.html 转载请保留说明！上一篇：JavaScript中Require调用js的实例分享(js require())
