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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
浅谈javascript中return语句
Jul 15 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue 修改 data 数据问题并实时显示操作
Sep 07 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 常见郁闷问题答解
2006/11/25 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
python实现图像识别功能
2018/01/29 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
用python制作个视频下载器
2021/02/01 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
初一科学教学反思
2014/01/27 职场文书
大学毕业感言一句话
2014/02/06 职场文书
六一儿童节主持词
2014/03/21 职场文书
护理目标管理责任书
2014/07/25 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python