js怎么能让进度条动起来一点点减少

JavaScript023

js怎么能让进度条动起来一点点减少,第1张

<pre t="code" l="js">s[0].style.width = 100 - r / i * 100 + quot%quot该代码不就是设置进度条的么

如果你能更改页面 你在标签中这样写：<pre t="code" l="html">lth5gt(资料完整度ltspan id=quotwz_jdquotgtlt/spangt)lt/h5gt然后在你的JS中 <pre t="code" l="js">s[0].style.width = 100 - r / i * 100 + quot%quot的下面 写上:

<pre t="code" l="js">document.getElementById(quotwz_jdquot).innerHTML = 100 - r / i * 100 + quot%quot不就OK了么

注意:你的JS中哪儿有那行代码 就在那行下面 追加

如果不能更改页面就在那行代码下面 这样写：<pre t="code" l="js">document.getElementsByTagName(quoth5quot)[0].innerHTML = quot(资料完整度quot+ (100 - r / i * 100) + quot%)quot里面的0 表示是第1个h5标签 如果你有多个 自己进行更改

我想到三种实现方法：

1、CSS字体支持反色效果。你可以用css实现。

2、CSS得遮罩效果，做两层把下面遮住，一点点露出来。

3、用canvas绘图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>demo</title>

<style type="text/css">

*{margin:0padding:0}

.div1{width:0height:30pxbackground:#da251a}

.div2{width:0height:30pxbackground:#ff6600}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    $(function(){

        setTimeout(demo1,1000)

        function demo1(){

            $('.div2').css('width','0')

            $('.div1').animate({'width':'1000px'},3000,demo2)

        }

        function demo2(){

            $('.div1').css('width','0')

            $('.div2').animate({'width':'1000px'},3000,demo1)

        }

    })

</script>

</head>

<body>

<div class="div1"></div>

<div class="div2"></div>

</body>

</html>

jQuery库文件自己引入下，不行继续追问。