设为首页收藏本站

 找回密码
 注册论坛

QQ登录

只需一步,快速开始

用百度帐号登录

只需两步,快速登录

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 371|回复: 0

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

[复制链接]

签到天数: 36 天

[LV.5]常住居民I

发表于 2016/11/4 15:07 | 显示全部楼层 |阅读模式 |Google Chrome 45.0.2454.101|Windows 7
天涯海角搜一下: 百度 谷歌 360 搜狗 有道 雅虎 必应 即刻
  废话不多说了,直接给大家贴代码了,具体代码如下所示:

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19

  20

  21

  22

  23

  24

  25

  26

  27

  28

  29

  30

  31

  32

  33

  34

  35

  36

  37

  38

  39

  40

  41

  42

  43

  44

  45

  46

  47

  48

  49

  50

  51

  52

  53

  54

  55

  56

  57

  58

  59

  60

  61

  62

  63

  64

  65

  66

  67

  68

  69

  70

  71

  72

  <!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="开始" www.9ask.cn/xiamen/ onclick="progressBar()" />

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

  </body>

  </html>
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册论坛 用百度帐号登录新浪微博账号登陆

本版积分规则

手机版|Archiver|Mail me|网站地图|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2018/12/11 06:29 , Processed in 0.274353 second(s), 46 queries , Gzip On, Memcache On.

Powered by itzmx!

© 2011-2018 sakura

快速回复 返回顶部 返回列表