如何用javascript使投票后结果的显示变成动态增长的效果

来源:百度知道 编辑:UC知道 时间:2024/09/27 11:32:34
就是让图片在网页上有增长的效果而不是直接显示出来
就向图中的蓝条是增长出来的而不是一打开浏览器就是那么长 ,一楼说的这个明白,我是说怎样让蓝色图片从0长到60那么长,并且让用户能够看到这个增长的过程,哎!研究好几个小时了,我对JAVASCRIPT不太熟悉啊。。。急啊

首先简短说一下这个原理

就是要通过一个函数,不断地改变那个条的长度。比如从0变到60。

下面是整个代码的简单演示页面:
<html>
<head>
<script type="text/javascript">
var c=0
function timedCount()
{
document.getElementById('myimg').width=c //这里的myimg是条的id。不需要改。
c=c+1
if(c>100) return false; //这里的数字100表示那个条最终的长度,应该换成你自己想要的长度。
t=setTimeout("timedCount()",10) //这里的数字10,是条变化的速度。越小越快。
}
</script>
</head>
<body>
<div>
<img src="nnn.jpg" id="myimg" width="10" height="20"> //这里的nnn.jpg要换成你自己的进度条图片,建议这个图片本身的宽为 1,即width=1。
<input type="button" value="开始" onClick="timedCount()">
</div>
</body>
<html>

显示百分比你可以用一个td,td的长度按百分比计算
<td width="60%">
然后td的颜色设成蓝色,或背景图片用蓝图片就行了。每次计算出新的百分比以后改变td的长度就ok