简单JS代码实现进度条加载效果

2013-8-4 Linyuting.cn 程序设计

    刚刚闲着无聊想起之前写过的一个用JS实现进度条动态加载效果的代码,再测试了下,发现效果还是蛮不错的,贴出来玩玩。

   运行测试>>  将以下代码粘贴其中,点击运行测试即可

    代码:

<html>

<head>

<title>正在加载...</title>

</head>

<body>

<div style="width:666px; height:20px; background-color:#ffffff; overflow:hidden; border:1px solid #000000; margin:0 auto; 

 

text-align:center;" id="pt">

  <div style="width:1px; height:20px; background-color:#009900; color:#ffffff; text-align:right;" id="jdt"></div>

</div>

<script>

setInterval(function(){

  if(parseInt(document.getElementById('jdt').style.width) >= 666){

    document.getElementById('jdt').style.width = 1;

  }

  var position = parseInt(document.getElementById('jdt').style.width,10);

  document.getElementById('jdt').style.width = position + 1;

},18);

</script> 

</body>

</html>

发表评论:

本站由emlog驱动 粤ICP备15042739号