javascript进度条实现
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>测试进度条</title>
<style>
div#loadbar {
width: 300px;
background-color: lavender;
#border: 1px solid fuchsia;
text-align: center;
border-radius: 5px;
} #bar {
display: block;
font-family: arial;
font-size: 12px;
background-color: red;
text-align: center;
padding: 5px 0px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
var i = 0;
function startbar() {
var showbar = setInterval("setbar()", 1000);
} function setbar() {
console.log("setbar");
i += 20;
if(i > 100) {
clearInterval(showbar);
}
document.getElementById("bar").style.width = i + "%";
document.getElementById("bar").innerHTML = i + "%";
}
startbar();
</script>
</head> <body>
<div id="loadbar">
<span id="bar" style="width: 0%;">20%</span>
</div>
</body> </html>
javascript进度条实现的更多相关文章
- JavaScript 进度条重复加载
<!DOCTYPE HTML> <html> <head> <meta charset ="utf-8"> <title> ...
- Javascript进度条
一个简单的进度条演示. <!doctype html> <html> <head> <meta charset="utf8"> &l ...
- JavaScript进度条(datalist/repeater等多个进度条)
JS代码: function SingleProgressBar() { var iload = document.getElementById("iLoading"); var ...
- JavaScript 以及 css3进度条
JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...
- 简易js进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 进度条效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...
- ASP.NET中二进制流下载文件时进度条的使用
说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- 原生javascript模仿win8等待进度条。
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
随机推荐
- 深入理解JS中&&和||
写了这么多JS,才发现JS的语法既是属于C语系的,又与一般C语系的编程语言某些地方有很大区别,其中&&和||就是其中一例. C语系中的&&和|| C语系的&&a ...
- OptaPlanner - AI Constraint satisfaction solver
OptaPlanner - 国内版 Binghttps://cn.bing.com/search?q=OptaPlanner&qs=n&form=QBRE&sp=-1& ...
- Maltego更新到4.2.4.12374
Maltego更新到4.2.4.12374 这次更新修改多个bug,并增加一些的特性和功能.主要变化如下: (1)允许用户直接复制实例的属性,以粘贴方式创建新实体. (2)右击网址类实体,右键菜单 ...
- System.MarshallByRefObject.cs
ylbtech-System.MarshallByRefObject.cs 允许在支持远程处理的应用程序中跨应用程序域边界访问对象. 1.返回顶部 1. #region 程序集 mscorlib, V ...
- Linux_CentOS 打包压缩和别名管理
Linux 打包压缩命令 目前 linux 中打包和压缩的命令很多,最常用的方法有 zip.gzip.bzip2.xz.tar 1.zip 压缩包 1.制作 zip -r public.zip pub ...
- IDEA使用tomcat插件
在实际项目开发中,特别是分布式项目,往往有N多个子项目需要同时启动测试. 这一切靠本地安装的tomcat是远远不够的,而且繁琐. 这里就需要用到tomca插件. 在pom.xml中引入: <bu ...
- IFC构件位置信息—ObjectPlacement
在IFC标准中,采用相对坐标系对构件定位.如柱(IfcColumn)的定位信息(局部坐标系及参考坐标系)由ObjectPlacement描述.ObjectPlacement由两部分组成: (1)Pla ...
- ABAP DEMO ole示例程序
*&---------------------------------------------------------------------* *& Report YCX_021 * ...
- CompletableFuture Quasar 等并发编程
CompletableFuture基本用法 https://www.cnblogs.com/cjsblog/p/9267163.html Quasar https://blog.csdn.net/ma ...
- python 多线程模板简单实现
#-*- encoding: UTF-8 -*- #编码声明 import threading,Queue,os import time #导入方法模块 def main(inargs): work_ ...