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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
jsTree使用记录实例
Dec 01 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
Element实现动态表格的示例代码
Aug 02 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.ini中文版(1)
2006/10/09 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php常量详细解析
2015/10/27 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python如何实现视频转代码视频
2019/06/17 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
C#实现启动一个进程
2016/10/01 面试题
出纳岗位职责模板
2013/11/27 职场文书
党员民主评议个人总结
2014/10/20 职场文书
维稳承诺书
2015/01/20 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL