html、css和jquery相结合实现简单的进度条效果实例代码


Posted in Javascript onOctober 24, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery实现进度条</title>
<style type="text/css">
body{
padding:30px;

margin-left:450px;

margin-top:200px;

width:350px;

border: 1px solid #98AFB7;
}
.progressBar{

width:280px;

height:20px;

border: 1px solid #98AFB7;

border-radius:8px;

background:#e1dfdf;
}
input{

margin-bottom:15px;
}
span{

position:relative;

top:-20px;

left:290px;
}
#bar {

width: 0px;

height: 20px;

border-radius: 7px;

background: #5EC4EA;
}
</style>
//引入Jquery文件
<script src="Jquerys/jquery.js"></script>
<script type="text/javascript">
function progressBar() {

$("#bar").css("width", "0px");

var speed =20;//进度条的速度

bar = setInterval(function () {

nowWidth = parseInt($("#bar").width());

if (nowWidth <= 279) {


var barWidth = (nowWidth + 1);


$("#bar").css("width", barWidth + "px");


var totla = parseInt($(".progressBar").width())


var ss = barWidth / totla * 100;


$("#span_s").text(ss);


var index = $("#span_s").text().indexOf(".");


if (index != -1) {



var context = $("#span_s").text().substring(0, index);



$("#span_s").text(context);


}


else {



$("#span_s").text(ss);



if (parseInt($("#span_s").text()) == 100) {



alert('完成');



}


} 

} else {



clearInterval(bar);


}

}, speed);
}
</script>
</head>
<body>

<input type="button" value="开始" onclick="progressBar()" />

<div class="progressBar"><div id="bar"></div></div><span id="span_s">0</span><span>%</span>
</body>
</html>

这个进度条特别简单,首先html里面的话就是一个div里面嵌套一个div,然后写好想要的样式就行,特效的实现也很简单就是,一个定时器里面写一个匿名函数里面实现也很简单,我这里是20毫秒执行一个匿名函数,里面的代码就是一次增加一个像素,当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
PHP捕捉异常中断的方法
Oct 24 #Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 #Javascript
浅谈Angular中ngModel的$render
Oct 24 #Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 #Javascript
H5移动端适配 Flexible方案
Oct 24 #Javascript
javascript的document中的动态添加标签实现方法
Oct 24 #Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 #Javascript
You might like
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
基于Vue.js实现简单搜索框
2020/03/26 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
行政前台岗位职责
2013/12/04 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
厂长助理岗位职责
2013/12/27 职场文书
采购部长岗位职责
2014/06/13 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python