当前位置:首页 > 日记 > 正文

javascript 网页进度条简单实例

javascript 网页进度条简单实例

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>

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

相关文章

excel2003调整行高的教程

excel2003调整行高的教程

调整,教程,行高,电脑软件,  Excel中的行高该如何调整呢?接下来是小编为大家带来的excel2003调整行高的教程,供大家参考。excel2003调整行高的教程:  调整行高步骤1:打开Excel2003,鼠标移动到下图红色方框处,左键按住不放,往下拉。   调整行…

在Word2007文档中怎么设置剪贴画位

在Word2007文档中怎么设置剪贴画位

位置,文档,设置,剪贴画,精确,  尽管Word2007提供了多种预设的剪贴画位置供用户选择,但在实际的Word文档编辑和排版工作当中,用户往往希望能更精确地控制剪贴画在Word文档页面中的位置。以下是小编为您带来的关于在Word2007文档中精确设置剪…

完美解决jQuery的hover事件在IE中

完美解决jQuery的hover事件在IE中

事件,完美,电脑软件,hover,jQuery,在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌。今天在给一个网站设计菜单时也遇到了这个情况,结果在百度上找了…

Excel2013怎么以只读方式打开Excel

Excel2013怎么以只读方式打开Excel

只读,步骤,方法,方式,电脑软件,  在Excel表格编辑软件中,可以使用以只读方式打开Excel工作表,只是单纯的进行阅读,而不进行修改。下面小编教你怎么做吧。Excel2013以只读方式打开Excel的步骤1、鼠标左键双击计算机桌面Excel2013工作表程序图…

PPT如何将裁剪成立体五角星样式

PPT如何将裁剪成立体五角星样式

图片裁剪,样式,如何将,电脑软件,PPT,  PPT的图片可以按自己的想法来裁剪,比如我们如果想按照自己喜欢的五角星形状来裁剪图片,需要在ppt中插入图片裁剪成立体五角星样式。以下是小编为您带来的关于PPT将图片裁剪成立体五角星样式,希望对您有…

如何在Excel2016表格中快速自动填

如何在Excel2016表格中快速自动填

自动填充,表格,快速,如何在,电脑软件,  excel表格中想要田中表格中的一列数据,一键解决excel2016自动填充,填充公式和文本都可以,任何内容都可以用此方法哟。以下是小编为您带来的关于Excel2016表格中快速自动填充一列,希望对您有所帮助。Exc…

wps表格如何设置分页预览

wps表格如何设置分页预览

分页,设置,方法,表格,如何设置,  使用表格软件的过程中,表格内容比较多的情况下,为了方便查看内容需要分页预览,具体怎么操作分页预览呢?下面小编与大家分享一下wps表格如何分页预览。wps表格设置分页预览的方法打开编辑表格,单击【视图】视…

jQuery中animate | 的使用方法及解

jQuery中animate | 的使用方法及解

支持,不被,使用方法,电脑软件,animate,jQuery中animate()的方法用于创建自定义动画的函数。 返回值:jQuery animate(params, [duration], [easing], [callback])如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用…

jQuery自定义元素右键点击事件 |

jQuery自定义元素右键点击事件 |

自定义,元素,点击事件,右键,案例,大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进、右键后退。第一步我们要屏蔽浏览器默认…

Vue.js devtool插件安装后无法使用

Vue.js devtool插件安装后无法使用

插件安装,解决办法,电脑软件,Vue,js,初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问。我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样…

excel表格百分比数据分析图表制作

excel表格百分比数据分析图表制作

图表,数据分析,百分比,表格,制作教程,  Excel中具体该如何制作百分比数据分析图进行数据分析呢?下面是由小编分享的excel表格百分比数据分析图表制作教程,以供大家阅读和学习。excel表格百分比数据分析图表制作教程:  数据分析图表制作步…

ES5学习教程之Array对象

ES5学习教程之Array对象

学习,对象,教程,电脑软件,Array,前言ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,下面主要介绍了ES5中的Array对象,需要的朋友们一起来看看吧。一、创建 Array 对象的语法:new Array();new Array(size);new Array(element0, ele…