js控制进度条到达100%跳转界面一
进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成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%跳转界面一的更多相关文章
- js控制进度条数据
<style><!-- #time{ width:500px; height: 20px; background: red; border-radius: 10px; } --> ...
- nprogress.js 头部进度条使用方法
nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
- Js 百分比进度条
[构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...
- js 实现进度条功能。
/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...
- C# 通过委托控制进度条以及多线程更新控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- js实现进度条
不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JS实现 进度条 不用控件
demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...
- js实现进度条效果
需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...
- 【Winform】使用BackgroundWorker控制进度条显示进度
许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...
随机推荐
- 在一个文件中有10G个整数,乱序排列,要求找出中位数
题目:在一个文件中有 10G 个整数,乱序排列,要求找出中位数.内存限制为 2G.只写出思路即可(内存限制为 2G的意思就是,可以使用2G的空间来运行程序,而不考虑这台机器上的其他软件的占用内存). ...
- OSGi 学习(二)
上一篇说了很多虚的东西,现在说点别的. OSGi系统的独立环境下的项目结构以及启动脚本. 先说项目结构,基于equinox的OSGi容器的项目结构如下所示: bin中定义启动脚本,停止脚本之类的. c ...
- Linux内核加载全流程
无论是Linux还是Windows,在加电后的第一步都是先运行BIOS(Basic Input/Output System)程序——不知道是不是所以的电脑系统都是如此.BIOS保存在主板上的一个non ...
- Matrix multiplication hdu4920
Problem Description Given two matrices A and B of size n×n, find the product of them. bobo hates big ...
- SQL Server 2012数据导入SQL Server 2008
SQL Server 2012可以降级到2008吗?没有找到方法,似乎也不支持.整理了一个变通的方法,把2012的数据和结构导出,然后再导入2008. 在 SQL Server 2012 使用 Sql ...
- Curl上传文件
curl -v -XPOST -H /thumbnail
- php核心知识要点
Php:脚本语言,网站建设,服务器端运行 PHP定义:一种服务器端的 HTML 脚本/编程语言,是一种简单的.面向对象的.解释型的.健壮的.安全的.性能非常之高的.独立于架构的.可移植的.动态的脚本语 ...
- rpm命令使用说明
RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种 ...
- [BigData]关于Hadoop学习笔记第一天(PPT总结)(一)
适合大数据的分布式存储与计算平台 l作者:Doug Cutting l受Google三篇论文的启发 lApache 官方版本(1.0.4) lCloudera 使用下载最多的版本,稳定,有商业支持 ...
- SQL Server 2005中约束
在SQL Server 2005中有6种约束:主键约束(primary key constraint).惟一性约束(unique constraint).检查约束(check constraint). ...