HTML5+CSS+JQuery 实现简单的进度条功能

样式：

<style type="text/css">  .processcontainer2{  width:450px;  border:1px solid #6C9C2C;  height:25px;  border-radius: 10px;box-shadow: 5px 10px 20px lightgray;} #processbar2{  background:green;  float:left; height:100%;  text-align:center;  line-height:150%; border-radius: 10px;color: white;}
</style>

关键HTML代码：

<body><div class="processcontainer2"><div id="processbar2">0</div></div>
</body>

脚本：

    <script type="text/javascript" src="js/jquery-1.11.3.js" ></script><script type="text/javascript">function gogogo(){var bar=$("#processbar2");$(bar).html(parseInt($(bar).html())+1+"%")$(bar).css("width",$(bar).html())console.log($(bar).html())//进度条满if($(bar).html()=="100%"){window.clearInterval(start);}}var start=setInterval(function(){gogogo()},50);$(document).ready(function(){start;})</script>

效果：

转载于:https://www.cnblogs.com/EdinburghOne/p/9392346.html

HTML5+CSS+JQuery 实现简单的进度条功能相关推荐

Android实现简单的进度条功能
实现进度条首先就要知道[AsyncTask],异步任务类这里推荐这个大佬写的文章,写的很不错详解Android中AsyncTask的使用 1.xml布局声明一个显示,两个按钮,一个进度条 < ...
ajax百分比加载特效,jQuery实现的简单百分比进度条效果示例
本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: var progressId = "ProgressBarID"; fun ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
用css3简单实现进度条
2019独角兽企业重金招聘Python工程师标准>>> css3是一个神奇的东西,刚才一时手痒,写了一个很简单的进度条不用js: 直接嵌套一个div,然后设置里面的div用anima ...
web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
HTML5+CSS大作业--简单的个人图片网站(6页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
html5拼音显示,科技常识：html5给汉字加拼音加进度条的实现代码
今天小编跟大家讲解下有关html5给汉字加拼音加进度条的实现代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5给汉字加拼音加进度条的实现代码的相关资料,希望小伙伴们看了有所帮 ...
html5给文字添加拼音,html5给汉字加拼音加进度条的实现代码
小编项目上最近设计有个新需求,要给汉纸加拼音,类似于加英文底部小标题类似,毕竟现在咱们中文之博大,大家都在学习和使用中文.下面就让我们学习一下吧,h5现在已经很强大足以应付很多需求. 一.给汉字加拼音 ...
JS简单实现进度条效果
今天我们来学习一下,用JS来实现简单的进度条效果首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{wi ...
如何用HTML语言设计进度条,html5代码如何实现进度条功能？（示例）
本篇文章主要介绍html5代码如何实现进度条功能,希望对大家有所帮助. html5代码实现进度条功能具体代码示例如下:/*实现进度条的功能*/ 下载进度: /*js代码*/ var pg=docume ...

HTML5+CSS+JQuery 实现简单的进度条功能

HTML5+CSS+JQuery 实现简单的进度条功能相关推荐

最新文章

热门文章