javascript 网页进度条简单实例


Posted in Javascript onFebruary 22, 2017

javascript 网页进度条简单实例

               最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家,

实例代码:

<!DOCTYPE html>
<html>
<head>
<style>
#box {float:left;width:100%;height:18px;border:1px solid;}
#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 6480; //总数
var curN = 4480; //当前值
function show()
{
 var box = document.getElementById("box");
 var o = document.getElementById("bar");
 o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>

取反:

<!DOCTYPE html>
<html>
<head>
<style>
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 6480; //总数
var curN = 6400; //当前值
var baseNub = total - curN;
function show()
{
 var box = document.getElementById("box");
 var o = document.getElementById("bar");
 o.style.width = ((baseNub / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
switchery按钮的使用方法
Dec 18 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 #Javascript
js实现简易垂直滚动条
Feb 22 #Javascript
微信小程序 引用其他js文件实现代码
Feb 22 #Javascript
You might like
如何在PHP程序中防止盗链
2008/04/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
应用数学自荐书范文
2013/11/24 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
2014年店长工作总结
2014/11/17 职场文书
国庆庆典邀请函
2015/02/02 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers