进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码:

 <style>
* {
margin:;
padding:;
} html, body {
font-family: arial, "microsoft yahei";
font-size: 14px;
background: #c2d7ac;
} .progress {
width: 300px;
height: 30px;
margin: auto;;
background: #70b4e5;
border-radius: 5px;
-webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
} .progress_bar {
width: 0%;
height: 26px;
background: url("images/bar.jpg") repeat;
background-size: auto 100%;
border-radius: 5px;
position: relative;
left: 3px;
right: 3px;
top: 2px;
} p {
width: 300px;
text-align: center;
font-size: 14px;
color: #c20606;
position: absolute;
top: 98px;
}
</style>
<body onload="fakeProgress(0, load)">
<div style="height: 120px;"></div>
<div class="progress">
<div id=load>
<div class="progress_bar"></div>
<p>0</p>
</div>
</div>
 <script type="text/javascript">
function setLOAD(v, el) {
var read = (document.all && document.getElementsByTagName);
if (read || document.readyState == "complete")
valueEl = el.children[1];
{
filterEl = el.children[0];
valueEl.innerText = v + "%";
filterEl.style.width = v + "%"; }
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "begin.html";
else {
setLOAD(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 2000);
}
}
</script>
效果图:

js控制进度条到达100%跳转界面一的更多相关文章

  1. js控制进度条数据

    <style><!-- #time{ width:500px; height: 20px; background: red; border-radius: 10px; } --> ...

  2. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  3. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  4. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  5. C# 通过委托控制进度条以及多线程更新控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. js实现进度条

    不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...

  8. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  9. 【Winform】使用BackgroundWorker控制进度条显示进度

    许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...

随机推荐

  1. Computer Science Theory for the Information Age-2: 高维空间中的正方体和Chernoff Bounds

    高维空间中的正方体和Chernoff Bounds 本文将介绍高维空间中正方体的一些性质,以及一个非常常见也是非常有用的概率不等式——Chernoff Bounds. 考虑$d$维单位正方体$C=\{ ...

  2. 修改范围PHP_INI_SYSTEM与PHP_INI_ALL的区别

    PHP_INI_USER 可在用户脚本(例如 ini_set() )或 Windows 注册表(自 PHP 5.3 起)以及 .user.ini 中设定 PHP_INI_PERDIR 可在 php.i ...

  3. Redis 集合(Set)

      Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据. Redis 中 集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是O(1). 集合中最 ...

  4. iptables常用命令

    常规: iptables -t filter -A INPUT -d -p tcp --dport -j DROPiptables -A INPUT -m iprange --src-range 22 ...

  5. C语言下的简易计算器

    #include <stdio.h> #include <math.h> int main() { double data1, data2; char op; == scanf ...

  6. sublime text修改TAB缩进为空格

    在sublime text中将TAB缩进直接转化为4个空格,可以按照如下方式操作: 菜单栏: Preferences -> Settings – More -> Syntax Specif ...

  7. 小技巧之a标签自动解析URL

    我们可能都知道javascript中的window.location对象用来获取当前页面的地址URL,并把浏览器重定向到新的页面.它有protocol.hostname.host.port.searc ...

  8. javascript基础知识--什么是构造函数?什么是实例化对象?

    前言--讲在前面 我想有很多以前很少接触后台编程语言的初学者朋友跟我一样,对javascript里面一系列的“名词”搞的一头雾水.好像大概知道讲的是什么,但其实理解的还是不清楚:我想,学习任何一种知识 ...

  9. [转] Portable Trac 简单介绍 - 兼谈为什么不选择 Redmine

    Portable Trac 简单介绍 - 兼谈为什么不选择 Redmine ​Trac是一个轻量级的软件项目管理环境,如果在工作中涉及一个开发团队的管理并且关心项目管理工具的话,相信都在 ​Trac. ...

  10. 第二篇、为UITableViewCell 高度自适应加速 缓存cell的高度

    通过NSCache缓存已经算好的行高 @interface ZHCellHeightCalculator : NSObject //系统计算高度后缓存进cache -(void)setHeight:( ...