HTML5中的进度条,progress,动态进度条

 时间:2024-10-29 18:27:27

1、从图中的代码看,要生成一个进度条十分简单,用progress控件就行了。

HTML5中的进度条,progress,动态进度条

2、按上面的代码运行页面,就可以得到一个标准的进度条了。

HTML5中的进度条,progress,动态进度条

3、progress可以设置二个参数,value和max。其中max就是进度条的最大值,一般都是设置为100.value就是当前进度的值,我们将value的值设置小一点,比如12,看下结果。

HTML5中的进度条,progress,动态进度条

4、如何显示一个动态的进度条?我们先写一个js方法,获取到进度条的当前进度,然后在这个当前进度上加1,就会让进度条往前移动了,代码如图

HTML5中的进度条,progress,动态进度条

5、然后再加JS代码,添加一个定时器,让定时器每隔600毫秒调用设置进度条的方法,这样就实现了动态的进度条了。

HTML5中的进度条,progress,动态进度条

6、看下运行效果,现在进度条在一点一点的加了。

HTML5中的进度条,progress,动态进度条

7、可以通过修改定时器的间隔时间,改小一点,就会让进度条走得快一点,改大点,就会走得慢。我们把它改成200: var timer = setInterval("set_progress()",200);看下效果。

HTML5中的进度条,progress,动态进度条
  • 如何通过CSS实现圆角边框?html圆角边框代码?
  • HBuilderX如何将代码加粗#校园分享#
  • HTML教程 预格式化标签(pre)的使用
  • HTML中ol有序列表有哪些序号展示方式
  • css:如何把元素显示为块级元素
  • 热门搜索
    珍惜时间手抄报 日行一善手抄报资料 壮族三月三手抄报 科学手抄报的资料 自我介绍手抄报图片 初中法制手抄报 守法手抄报 小学生读书手抄报图片 手抄报的格式 圣诞节手抄报图片