JQuery制作加载进度条
页面展示:
点击加载进度条:
点击结束进度条:
代码:
<html> <meta charset="utf-8"> <title>jQuery制作进度条</title> <link rel="stylesheet" href="label/bootstrap.css" type="text/css"/> <script src="label/jquery.min.js" type="text/javascript"></script> <script src="label/bootstrap.min.js" type="text/javascript"></script> <style> #loading6 { height: 34px; width: 100%; background-image: url(label/loading.gif); background-repeat: no-repeat; background-position: center; } </style> <script type="text/javascript"> $(function() { $('#add_disk_model').modal('show') $('#loading6').hide() $('#exec_label').click(function () { $('#loading6').show() }); $('#stop_label').click(function () { $('#loading6').hide() }); }); </script> <form> <div id="add_disk_model" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title">测试加载条</h4> </div> <div class="panel-body"> <form class="bs-example form-horizontal activate-form"> <div id="loading6" class="portlet-body"></div> <div class="form-actions "> <div class="modal-footer"> <div class="col-md-4"> <button id="exec_label" type="button" class="btn green">加载进度条</button> </div> <div class="col-md-4"> <button id="stop_label" type="button" class="btn green">结束进度条</button> </div> </div> </div> </form> </div> </div> </div> </div> </form> </html>
插件参考:
链接:https://pan.baidu.com/s/1k86UfxWTHa3HSJnct42uKQ
提取码:p32l
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现