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 相关文章推荐
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
详解闭包解决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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
javascript动态加载三
2012/08/22 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
python中如何写类
2020/06/29 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
社会实践评语
2014/04/28 职场文书
人民调解协议书范本
2014/10/11 职场文书
道歉短信大全
2015/05/12 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python